दिलचस्प पोस्ट
जीआईटी रिमोट अन्य एसएसएच पोर्ट के साथ जोड़ें रेगेक्स: मामले की संवेदनशीलता को अनदेखा करें कस्टम सदस्यताप्रदाता को .NET 4.0 में ऐरे या जावा में सूची। जो तेज़ है? मैं मानवीय पठनीय तरीके से जावा। वर्ग फ़ाइलों को कैसे खोल सकता हूं? जावास्क्रिप्ट में तत्वों के एक सेट के माध्यम से लूप का सबसे अच्छा तरीका क्या है? टर्नरी ऑपरेटर के लिए आप किस कोडिंग शैली का उपयोग करते हैं? एकाधिक कुंजी के द्वारा शब्दकोशों की पायथन सॉर्टिंग सूची Onclick घटना नहीं jsfiddle.net पर फायरिंग Laravel 5 – दृश्य में भंडारण में अपलोड की गई छवि को कैसे देखें? jQuery आर्ट बनाम सहारा? संग्रहीत कार्यविधि परिणाम सेट के लिए स्तंभ परिभाषा को पुनर्प्राप्त करें जावा मेमोरी उपयोग की निगरानी कैसे करें? ES6 वेबपैक का उपयोग करके एक vue.js प्रोजेक्ट में ('@') साइन इन पथ पर उपयोग करके आयात करें वेबव्यू के अंदर बाहरी वेबपेज को कैसे लोड करें

JQuery में, कैसे गतिशील HTML तत्वों को ईवेंट संलग्न करें?

मान लीजिए मेरे पास कुछ jQuery कोड है जो क्लास "माईक्लास" वाले सभी तत्वों के लिए ईवेंट हैंडलर को जोड़ता है उदाहरण के लिए:

$(function(){ $(".myclass").click( function() { // do something }); }); 

और मेरा एचटीएमएल निम्नानुसार हो सकता है:

 <a class="myclass" href="#">test1</a> <a class="myclass" href="#">test2</a> <a class="myclass" href="#">test3</a> 

यह कोई समस्या नहीं है के साथ काम करता है हालांकि, विचार करें कि क्या "माइक्लास" तत्व किसी भविष्य के समय में पृष्ठ पर लिखा गया था।

उदाहरण के लिए:

 <a id="anchor1" href="#">create link dynamically</a> <script type="text/javascript"> $(function(){ $("#anchor1").click( function() { $("#anchor1").append('<a class="myclass" href="#">test4</a>'); }); }); </script> 

इस स्थिति में, "test4" लिंक बनाया जाता है जब कोई उपयोगकर्ता # एंकर 1 पर क्लिक करता है

"Test4" लिंक में इसके साथ जुड़े क्लिक () हेन्डलर नहीं है, भले ही इसमें class = "myclass" है

कुछ अनुमान है इसे कैसे ठीक किया जा सकता है?

असल में, मैं एक बार क्लिक () हेन्डलर लिखना चाहूंगा और इसे पेज लोड पर मौजूद दोनों सामग्री पर लागू किया गया है, और बाद में एजेएक्स / डीएचटीएमएल के माध्यम से लाई गई सामग्री

वेब के समाधान से एकत्रित समाधान "JQuery में, कैसे गतिशील HTML तत्वों को ईवेंट संलग्न करें?"

मैं बाद में jQuery के रिलीज़ में परिवर्तन को प्रतिबिंबित करने के लिए एक नया जवाब जोड़ रहा हूं। .live () विधि को jQuery 1.7 के रूप में पदावनत किया गया है।

http://api.jquery.com/live/ से

JQuery 1.7 के रूप में, .live () विधि नापसंद है। ईवेंट हैंडलर को संलग्न करने के लिए .on () का उपयोग करें JQuery के पुराने संस्करणों के उपयोगकर्ता का उपयोग करना चाहिए .delegate () प्राथमिकता में .live ()।

JQuery 1.7+ के लिए आप एक इवेंट हैंडलर को किसी मूल तत्व के साथ .on () का उपयोग करके संलग्न कर सकते हैं, और एक तर्क के रूप में 'myclass' के साथ संयुक्त चयनकर्ता को पास कर सकते हैं।

http://api.jquery.com/on/ देखें

इसके बजाय …

 $(".myclass").click( function() { // do something }); 

तुम लिख सकते हो…

 $('body').on('click', 'a.myclass', function() { // do something }); 

यह शरीर में 'माईक्लास' वाले सभी टैगों के लिए काम करेगा, चाहे वह पहले से मौजूद हो या गतिशील रूप से बाद में जोड़ा गया हो।

शरीर टैग यहां प्रयोग किया जाता है क्योंकि उदाहरण के निकट कोई स्थायी आस-पास टैग नहीं था, लेकिन किसी भी मूल टैग पर मौजूद है, जब। उदाहरण के लिए एक सूची के लिए एक उल टैग जिसमें गतिशील तत्व जोड़े गए हैं, इस तरह दिखेंगे:

 $('ul').on('click', 'li', function() { alert( $(this).text() ); }); 

जब तक उल टैग मौजूद है, यह काम करेगा (कोई ली तत्वों की अभी तक मौजूद नहीं है)

कभी-कभी यह (शीर्ष वोट वाले उत्तर) ऐसा करने से हमेशा पर्याप्त नहीं होता है:

 $('body').on('click', 'a.myclass', function() { // do something }); 

ऑर्डर ईवेंट हैंडलरों को निकाल दिया गया है क्योंकि यह एक मुद्दा हो सकता है। यदि आप खुद को ऐसा कर पाते हैं, लेकिन यह उस आदेश के कारण मुद्दों को पैदा कर रहा है जिसमें इसे संभाला जाता है .. आप हमेशा उस फ़ंक्शन में लपेट सकते हैं, जिसे श्रोता को "रिफ्रेश" कहा जाता है।

उदाहरण के लिए:

 function RefreshSomeEventListener() { // Remove handler from existing elements $("#wrapper .specific-selector").off(); // Re-add event handler for all matching elements $("#wrapper .specific-selector").on("click", function() { // Handle event. } } 

क्योंकि यह एक फ़ंक्शन है, जब भी मैं अपने श्रोता को इस तरीके से सेट करता हूं, मैं आमतौर पर उसे दस्तावेज़ तैयार करता हूं:

 $(document).ready(function() { // Other ready commands / code // Call our function to setup initial listening RefreshSomeEventListener(); }); 

तब, जब भी आप कुछ गतिशील रूप से जोड़ा गया तत्व जोड़ते हैं, तो उस पद्धति को फिर से कॉल करें:

 function SomeMethodThatAddsElement() { // Some code / AJAX / whatever.. Adding element dynamically // Refresh our listener, so the new element is taken into account RefreshSomeEventListener(); } 

उम्मीद है कि यह मदद करता है!

सादर,

JQuery 1.7 के बाद पसंदीदा विधियां हैं .on () और .off ()

शॉन का जवाब एक उदाहरण दिखाता है

अब पदावनत:

JQuery फ़ंक्शंस का उपयोग करें। .live() और .die() JQuery 1.3.x में उपलब्ध है

डॉक्स से:

प्रत्येक पैराग्राफ के टेक्स्ट को एक सचेत बॉक्स में प्रदर्शित करने के लिए जब भी क्लिक किया जाता है:

 $("p").live("click", function(){ alert( $(this).text() ); }); 

साथ ही, लाइवक्वोर प्लगइन इसको भी करता है और अधिक घटनाओं के लिए समर्थन करता है।

सभी वर्तमान – और भावी मिलान वाले तत्वों के लिए एक घटना (जैसे क्लिक) के लिए एक हैंडलर बांधता है कस्टम ईवेंट बाँध सकते हैं

लिंक पाठ

 $(function(){ $(".myclass").live("click", function() { // do something }); }); 

यदि आप डोम के लिए एन्कर्स का एक ढेर जोड़ रहे हैं, तो इसके बजाय इवेंट प्रतिनिधिमंडल में देखें।

यहां एक सरल उदाहरण है:

 $('#somecontainer').click(function(e) { var $target = $(e.target); if ($target.hasClass("myclass")) { // do something } }); 

यदि आपका jQuery 1.3+ पर है तो इसका उपयोग करें जीना()

सभी वर्तमान – और भावी मिलान वाले तत्वों के लिए एक घटना (जैसे क्लिक) के लिए एक हैंडलर बांधता है कस्टम ईवेंट बाँध सकते हैं

आप live() फ़ंक्शन का उपयोग करना चाहते हैं डॉक्स देखें।

उदाहरण के लिए:

 $("#anchor1").live("click", function() { $("#anchor1").append('<a class="myclass" href="#">test4</a>'); }); 

आप सभी तत्वों के लिए एक पृष्ठ पर एक क्लिक ईवेंट बाँध सकते हैं, चाहे वे उस पेज पर पहले से ही हों या यदि वे भविष्य के कुछ समय बाद पहुंचें, तो:

 $(document).bind('click', function (e) { var target = $(e.target); if (target.is('.myclass')) { e.preventDefault(); // if you want to cancel the event flow // do something } else if (target.is('.myotherclass')) { e.preventDefault(); // do something else } }); 

थोड़ी देर के लिए इसे इस्तेमाल किया गया एक जादू की तरह काम करता है।

JQuery 1.7 और बाद में, इसे उपयोग करने की सलाह दी जाती है .on() बाइंड या किसी अन्य ईवेंट प्रतिनिधिमंडल के स्थान पर, लेकिन .bind() अभी भी काम करता है