Ajax लोड की गई सामग्री पर घटनाओं को कैसे बांधें?

96

मेरे पास एक लिंक है, जिसमें मेरे HTML पेज के myLinkAJAX- लोड की गई सामग्री को div(appendedContainer) डालना चाहिए । समस्या यह है कि जो clickघटना मैंने jQuery के साथ बांधी है वह नव लोड की गई सामग्री पर निष्पादित नहीं की जा रही है जो कि appendedCertainer में डाली गई है। यह clickईवेंट DOM तत्वों पर आधारित है जो मेरे AJAX फ़ंक्शन से लोड नहीं हैं।

मुझे क्या बदलना होगा, जैसे कि घटना बाध्य होगी?

मेरा HTML:

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

मेरा जावास्क्रिप्ट:

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {           
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

भरी जाने वाली सामग्री:

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>

— confile
स्रोत

1

नोट: निम्नलिखित काम नहीं कर रहा है। आप .कक्षा चयनकर्ता के लिए गायब हैं ।

— अपरिभाषित

यह एक टाइपो था! यह अभी भी काम नहीं कर रहा है।

— मिलाप

1

Jquery .load () विधि देखें । । $ ( '# लक्ष्य') लोड ( 'source.html');

— km6zla

क्या लोड () कुछ अलग करता है?

— confile

218

गतिशील रूप से बनाए गए तत्वों के लिए ईवेंट प्रतिनिधिमंडल का उपयोग करें:

$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});

यह वास्तव में काम करता है, यहां एक उदाहरण है जहां मैंने कक्षा के .mylinkबजाय एक एंकर को संलग्न किया है data- http://jsfiddle.net/EFjzG/

— dsgriffin
स्रोत

यह वही है जो मैंने लिखा था कि मैंने किया।

— मिलाप

@confile सच में? मैंने आपके प्रश्न को दो बार पढ़ा है और इसे या तो लिखित रूप में या कोड में नहीं देखा है?

— dsgriffin

@confile .. जवाब अगियान को देखें .. जो आपके पास है उससे अलग है

— मोहम्मद आदिल

2

@confile मेरा जवाब काम करता है !! यहाँ इसका एक उदाहरण है - jsfiddle.net/EFjzG

— dsgriffin

1

नमस्ते, यह जवाब ठीक काम कर रहा है। ईवेंट पूरे दस्तावेज़ पर संलग्न है, इसलिए मूल रूप से पृष्ठ पर प्रत्येक क्लिक ईवेंट ट्रिगर कर रहा है, लेकिन फिर, चयनकर्ता '.Mylink' पर क्लिक की जाने वाली घटनाओं को फ़िल्टर करने के लिए लागू किया जाता है। उत्कृष्ट तकनीक।

— अमीर

23

यदि सामग्री को .on () के बाद जोड़ा जाता है, तो आपको लोड की गई सामग्री के मूल तत्व पर एक प्रत्यायोजित घटना बनाने की आवश्यकता होगी। ऐसा इसलिए होता है क्योंकि इवेंट हैंडलर बंधे होते हैं .on () कहा जाता है (यानी आमतौर पर पेज लोड पर)। यदि तत्व मौजूद नहीं है, तो .on () को कहा जाता है, घटना इसके लिए बाध्य नहीं होगी!

क्योंकि ईवेंट DOM के माध्यम से प्रचारित होते हैं, इसलिए हम इसे मूल तत्व ( .parent-elementनीचे उदाहरण में) पर एक प्रत्यायोजित घटना बनाकर हल कर सकते हैं, जिसे हम जानते हैं कि पेज लोड होने पर मौजूद है। ऐसे:

$('.parent-element').on('click', '.mylink', function(){
  alert ("new link clicked!");
})

इस विषय पर कुछ और पढ़ने:

— काई
स्रोत

3

मैं इस उत्तर को @lifetimes द्वारा पसंद करना चाहता हूं, क्योंकि यह मुझे हैंडलर को कुछ मूल तत्व में सेट करने के लिए कहता है जो लोड समय पर मौजूद है, जरूरी नहीं कि सभी तरह से दस्तावेज़ तक । यह दूसरे तर्क में चयनकर्ता onको अनपेक्षित मैचों के लिए कम प्रवण बनाता है ।

— आर। श्रेयर्स

अगर अजाक्स लोड किया गया html वर्ग भी पैरेंट-एलिमेंट का है तो इसका काम नहीं है

— jafar pinjar

6

यदि आपका सवाल "कैसे अजाक्स लोड सामग्री पर घटनाओं को बांधने के लिए है" तो आप इस तरह कर सकते हैं:

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

// lazy load to DOMNodeInserted event
$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

इसलिए आपको अपने विन्यास को हर अजाक्स कोड में रखने की आवश्यकता नहीं है

— antoniputra
स्रोत

2

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

उदाहरण -

$( document ).on( events, selector, data, handler );

— elnaz
स्रोत

1

उन लोगों के लिए जो अभी भी एक समाधान की तलाश कर रहे हैं, ऐसा करने का सबसे अच्छा तरीका यह है कि घटना को दस्तावेज़ पर ही बाँध दिया जाए, न कि "तैयार पर" घटना के साथ बाँधने के लिए: जैसे

$(function ajaxform_reload() {
$(document).on("submit", ".ajax_forms", function (e) {
    e.preventDefault();
    var url = $(this).attr('action');
    $.ajax({
        type: 'post',
        url: url,
        data: $(this).serialize(),
        success: function (data) {
            // DO WHAT YOU WANT WITH THE RESPONSE
        }
    });
});

});

— वास्तविक स्रोत
स्रोत

1

यदि आपके ajax प्रतिक्रिया में उदाहरण के लिए html फॉर्म इनपुट हैं, तो इससे बढ़िया होगा:

$(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) { 
if (this.value == 'Yes') {
  // do something here
} else if (this.value == 'No') {
  // do something else here.
} else {
   console.log('The new input field from an ajax response has this value: '+ this.value);
}

});

— ChristianG
स्रोत

0

इसके बजाय jQuery.live () का उपयोग करें। यहाँ प्रलेखन

जैसे

$("mylink").live("click", function(event) { alert("new link clicked!");});

— रोमेल
स्रोत

9

.live()नवीनतम jquery संस्करण में हटा दिया गया और हटा दिया गया है।

— मोहम्मद आदिल

0

ASP.NET के लिए यह प्रयास करें:

<script type="text/javascript">
    Sys.Application.add_load(function() { ... });
</script>

यह पेज लोड और अपडेट पैनल लोड पर काम करने के लिए प्रतीत होता है

कृपया पूरी चर्चा यहां पाएं ।

— माइकल
स्रोत

2

यह "Sys.Application" कहाँ से आता है? - '

— एंड्रे मार्कोंडेस टेक्सेरा

यह ASP.NET से संबंधित प्रतीत होता है: msdn.microsoft.com/en-us/library/vstudio/…

— माइकल