add new image <div id="fancyDIV"> number1 number2 </div> </div> जे"> add new image <div id="fancyDIV"> number1 number2 </div> </div> जे"> add new image <div id="fancyDIV"> number1 number2 </div> </div> जे" />

jQuery, गतिशील लोड सामग्री के बाद, फ़ंक्शन में अवांछित डुप्लिकेट निष्पादित फ़ंक्शन

लोड गतिशील सामग्री के बाद, मुझे अनचाहे एकाधिक कॉलिंग फ़ंक्शन के साथ समस्या है।

एचटीएमएल

<div class="wrap">
  add new image


<div id="fancyDIV"> t1number1 t1number2 </div> </div>

जे एस

$("#fancyDIV").on("focusin", function(){    
    $('span').on('click', function(e) {
        alert(0);
    });
});//on 

var $indice = 3;
$("a.addNewImage").click(function(){
     if ($indice > 8) {
        alert('sorry, there are no more images to add'); return false;
     }else{ 
        $("#fancyDIV").append('thumb'+$indice+'number'+$indice+'');
        $indice++;
    }
}); 

जे एसfiddle

अगर लोड करने के तुरंत बाद मैं अवधि पर क्लिक करता हूं, तो अलर्ट केवल 1 बार सही दिखाई देता है।

यदि मैं गतिशील रूप से अधिक चित्र जोड़ता हूं, तो यदि मैं अंतिम अवधि पर क्लिक करता हूं, तो यह एक बार निष्पादित करता है, यह सही है।

लेकिन अगर मैं और अधिक गतिशील चित्र जोड़ता हूं और मैं पिछले किसी भी अवधि पर क्लिक करता हूं, तो यह चेतावनी मुझे कई बार दिखाई देती है। यह नहीं हो सकता है, क्योंकि आखिरकार इस बिंदु पर एक चेतावनी के बजाय, AJAX अनुरोध भेजें। और मुझे एक ही प्रश्न के दर्जनों भेजता है।

मेरी इच्छा है कि यह चेतावनी सिर्फ एक बार दिखाई दे, भले ही मैं नई तस्वीरों को कितना जोड़ूं। क्या यह कर सकता है

Edit (what i want): I want to dynamically load the component and be able to click on it to sent a request ajax.Normally, this will work only for those items that are loaded at the beginning, for those added dynamically do not work.I was able to do this, by focusIn, but by then, ajax request is sent as many times as I click to add a new item. But I want to send request only once.

0
तो यह सही करने का तरीका क्या है?
जोड़ा लेखक Damonsson, स्रोत
मैं गतिशील रूप से छवियों को लोड कर रहा हूं, मैं इसके अंदर तत्व पर क्लिक करना चाहता हूं, अजाक्स से अनुरोध किया गया था (उपरोक्त चेतावनी (0) में उदाहरण में)। अगर मैं "on.focusin" को हटा देता हूं। यह केवल उन छवियों के लिए काम करेगा जो सामान्य रूप से लोड होते हैं, लेकिन गतिशील रूप से जोड़े गए लोगों के लिए काम नहीं होता है। अगर मैं यहां "ऑन.फोकसिन" रहता हूं। मैं डुप्लिकेशंस अलर्ट (0), और मैं केवल एक बार ट्रिगर करना चाहता हूं।
जोड़ा लेखक Damonsson, स्रोत
हर बार जब आप उस div पर ध्यान केंद्रित करते हैं, तो वे सभी प्राप्त करते हैं अतिरिक्त ईवेंट पर क्लिक करें। आपके द्वारा लिखे गए कोड के साथ ऐसा करना चाहिए। आप इसके बजाय क्या करना चाहते थे?
जोड़ा लेखक Kevin B, स्रोत
यह इस बात पर निर्भर करता है कि "इसे सही करें" का अर्थ क्या है। आप फोकसिन पर एक क्लिक इवेंट क्यों जोड़ रहे हैं?
जोड़ा लेखक Kevin B, स्रोत
एक ऐसी घटना को बाध्य करने का एक और तरीका है जो तत्वों को सीधे बाध्य किए बिना गतिशील तत्वों पर क्लिक ईवेंट को रोक देगा। ( घटना प्रतिनिधिमंडल )। बस क्लिक हैंडलर को हटाएं और फ़ोकस ईवेंट को एक क्लिक ईवेंट में बदलें। फिर आप क्लिक किए गए तत्व को e.target के साथ प्राप्त कर सकते हैं
जोड़ा लेखक Kevin B, स्रोत

1 उत्तर

आप कभी भी .on पर नेस्टेड कॉल नहीं करना चाहते हैं। यदि आप बाहरी को हटाते हैं, तो $ ("# fancyDIV") , तो यह लगभग करने का सही तरीका है।

इसका कारण यह नहीं है कि तत्वों के निर्माण से पहले हैंडलर सेट किया गया है। इसका मतलब है कि हैंडलर उन तत्वों पर सेट नहीं है।

इसके चार तरीके हैं। जब वे बनाए जाते हैं तो आप नए तत्वों को हैंडलर जोड़ सकते हैं। व्यक्तिगत रूप से मैं दूसरे तरीके को पसंद करूंगा, जो हैंडलर को कुछ पूर्वजों के तत्व में जोड़ना है, लेकिन इसे एक निश्चित सीएसएस चयनकर्ता से मेल खाने वाले वंशजों पर चलाने के लिए सेट करें। (यह डोम इवेंट हैंडलिंग की तथाकथित "बबल-अप" सुविधा का उपयोग करता है।) इस तरह:

$('#fancyDiv').on('click', 'span', function(e) {
    alert(0);
});

This will run the handler when any element inside the #fancyDiv is clicked.

Incidentally, it might be wise to use CSS classes or something, since there's a risk that more elements might be added to the code later.

0
जोड़ा
आप एक प्रतिभाशाली हैं। मुझे विश्वास था कि अगर मैं गतिशील रूप से जोड़े गए तत्व पर कुछ करना चाहता हूं, तो मुझे अपने वास्तविक() पर पहले "ऑन ()" का उपयोग करना होगा।
जोड़ा लेखक Damonsson, स्रोत