javascript - JQuery में, गतिशील एचटीएमएल तत्वों को घटनाओं को कैसे संलग्न करें?




events dhtml (6)

JQuery 1.7 के बाद पसंदीदा तरीके हैं .off() और .off()

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

अब बहिष्कृत:

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

दस्तावेज़ों से:

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

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

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

इस प्रश्न का उत्तर यहां दिया गया है:

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

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

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

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

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

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

<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>

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

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

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

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


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

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

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

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

$('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 रिलीज में परिवर्तन को दर्शाने के लिए एक नया जवाब जोड़ रहा हूं। .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
});

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

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

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

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


यदि आपका jQuery 1.3+ पर उपयोग करें तो इसका उपयोग करें। .live()

सभी मौजूदा - और भविष्य - मिलान तत्व के लिए एक हैंडलर को एक ईवेंट (जैसे क्लिक) से जोड़ता है। कस्टम घटनाओं को भी बांध सकते हैं।


सभी मौजूदा - और भविष्य - मिलान तत्व के लिए एक हैंडलर को एक ईवेंट (जैसे क्लिक) से जोड़ता है। कस्टम घटनाओं को भी बांध सकते हैं।

.live()

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




dhtml