/ JQuery में गतिशील तत्व के लिए / बाध्यकारी क्लिक घटना

JQuery में गतिशील तत्व के लिए बाध्यकारी क्लिक घटना - jquery

मेरे पास एक div है जो कि .AX विशेषता द्वारा AJAX कॉल करने के बाद गतिशील रूप से भरी जाती है

$("#gallery").html(imagesHtml);

insdie imagesHtml मैं "प्रीबटन" और "nxtbtn" नामक 2 बटनों को आह्वान करता हूं, अब मैं इन बटन को JQuery में निम्नलिखित सिंटैक्स के साथ बांधने की कोशिश कर रहा हूं:

$("#gallery").bind("click", "#nxtbtn", function() {
alert("next");
});

तथा

$("#gallery").bind("click", "#prebtn", function() {
alert("previous");
});

लेकिन जब मैं दोनों में से किसी एक बटन पर क्लिक करता हूं तो दोनों घटनाएँ शुरू हो जाती हैं और यह "अगला" और "पिछले" के लिए अलर्ट दिखाता है; कैसे मैं सिर्फ एक बटन पर क्लिक करें!

यदि आपको अधिक स्पष्टीकरण की आवश्यकता है, तो कृपया मुझे बताएं।

धन्यवाद

उत्तर:

जवाब के लिए 3 № 1

आप "भ्रमित कर रहे हैं bind तथा on तरीकों। वे समान दिखते हैं, लेकिन bind कम कार्यक्षमता है: यह इवेंट डेलिगेशन का समर्थन नहीं करता है। दूसरा तर्क प्रत्यायोजित घटनाओं के लिए चयनकर्ता नहीं है, लेकिन ए data तर्क।

यह काम करेगा:

$("#gallery").on("click", "#nxtbtn", function() {

जवाब के लिए 0 № 2

मुझे लगता है कि आप का उपयोग करना था .on() बजाय:

$("#gallery").on("click", "#nxtbtn", function() {
alert("next");
});
$("#gallery").on("click", "#prebtn", function() {
alert("previous");
});

The bind() समारोह प्रारंभिक चयनकर्ता में तत्व के लिए बाध्य करेगा, इस मामले में #gallery. तो तुम दोनों कार्यों कि घटना के लिए बाध्य कर रहे हैं. तकनीकी तौर पर है कि "भी क्या .on() करता है, लेकिन यह तत्व है जो घटना निकाल दिया के लिए एक फिल्टर के रूप में दूसरे तर्क का उपयोग करता है.मुझे नहीं लगता कि .bind() करता है कि, मुझे लगता है कि दूसरा तर्क सिर्फ डेटा जो अपने घटना हैंडलर कार्यों की अनदेखी है.


जवाब के लिए 0 № 3

आपको उपयोग करना चाहिए पर के बजाय का उपयोग करने का बाँध पाने के लिए यह गतिशील रूप से बनाया तत्वों पर काम किया. जबकि e.preventDefault() संबंधित घटना के डिफ़ॉल्ट कार्रवाई ट्रिगर को रोकने जाएगा.

$("#gallery").on("click", "#nxtbtn", function(e) {
e.preventDefault();
alert("next");
});

तथा

$("#gallery").on("click", "#prebtn", function(e) {
e.preventDefault();
alert("previous");
});