jquery इवेंट AJAX कॉल

Question

के बाद आग नहीं लगेगा यह jquery के साथ एक अजीब मुद्दा है। मैं एक लोड

<div id="container"> 

पृष्ठ लोड पर लोड कर रहा हूं। प्रत्येक रिकॉर्ड टैबलेट डेटा होता है जिसमें इसके साथ जुड़े 'डिलीट' AJAX फ़ंक्शन होते हैं। जब पृष्ठ लोड होता है और 'हटाएं' लिंक पर क्लिक करता है, तो AJAX कॉल ठीक से ठीक हो जाता है। हालांकि, ईवेंट को निकाल दिए जाने के बाद, डेटा अजाक्स कॉल से वापस कर दिया जाता है, और div डेटा के साथ पॉप्युलेट किया जाता है (लेकिन पृष्ठ रीफ्रेश या पुनः लोड नहीं होता है) जब मैं फिर से लिंक पर क्लिक करता हूं, तो AJAX स्क्रिप्ट आग नहीं जाएगी।

$(document).ready(function() { 
    $("button.done").button({ 
    }).click(function() { 
     var BatchID = $("input#BatchID").val(); 
     var Amount = $("input#Amount").val(); 
     var Name = $("input#CheckName").val(); 
     var Check_Number = $("input#Check_Number").val(); 
     var Company = $("select#Company").val(); 
     var Department = $("select#Department").val(); 
     $.ajax({ 
      type: 'GET', 
      url: '/app/usagCheckEntryWS.html', 
      data: { 
       "BatchID" : BatchID, 
       "Amount" : Amount, 
       "Name" : Name, 
       "Check_Number" : Check_Number, 
       "Company" : Company, 
       "Department" : Department 
      }, 
      success: function (data) { 
        var ang = ''; 
        var obj = $.parseJSON(data); 
        $.each(obj, function() { 
         ang += '<table><tr><td width="45">' + this["RefID"] + '</td><td width="140">' + this["Name"] + '</td><td width="95">' + this["CheckNumber"] + '</td><td align="right" width="70">$' + this["Amount"] + '</td><td width="220" style="padding-left: 15px;">' + this["Description"] + '</td><td><div class="delete" rel="' + this["RefID"] + '"><span>Delete</span></div></td></tr></table>'; 
        }); 
        $('#container').html(ang); 
        $("input#Amount").val(''); 
        $("input#CheckName").val(''); 
        $("input#Check_Number").val(''); 
        $("select#Company").val('MMS'); 
        $("th#dept").hide(); 
        $('input#CheckName').focus(); 
      } 
     }); 
    }); 
}); 

Answer 1

जब आप एक तत्व निकालें और फिर (जावास्क्रिप्ट के माध्यम से) इसे बदलना है, यह है कि पृष्ठ लोड पर यह करने के लिए जोड़ा गया था किसी भी घटना बाइंडिंग खो देता है: यहाँ मेरी कोड है।

(यह भी लागू होता है के लिए सामग्री पृष्ठ लोड के बाद पृष्ठ पर जोड़ा - यानी ajax भरी हुई सामग्री)

इस के लिए कई संभव समाधान कर रहे हैं।

1) अपने "बाध्यकारी" कोड को समाहित करें और इसे पृष्ठ लोड पर दोनों कॉल करें और तुरंत प्रश्न में तत्व को पृष्ठ पर वापस जोड़ा जाने के तुरंत बाद। उदाहरण के लिए:

$(document).ready(function(){ 
    // bind event handlers when the page loads. 
    bindButtonClick(); 
}); 

function bindButtonClick(){ 
    $('.myClickableElement').click(function(){ 
     ... event handler code ... 
    }); 
} 

function updateContent(){ 
    $.ajax({ 
     url : '/ajax-endpoint.php', 
     data : {'onMyWay' : 'toServer'}, 
     dataType : 'html', 
     type : 'post', 
     success : function(responseHtml){ 
      // .myClickableElement is replaced with new (unbound) html element(s) 
      $('#container').html(responseHtml); 

      // re-bind event handlers to '.myClickableElement' 
      bindButtonClick(); 
     } 
    }); 
} 

2) को संभालने के लिए और अधिक सुरुचिपूर्ण तरीका यह: jQuery's .on() method का उपयोग करें। इसके साथ, आप इवेंट हैंडलर को ईवेंट लक्ष्य के अलावा अन्य तत्वों को बाध्य करने में सक्षम हैं - यानी एक तत्व जो पृष्ठ से कभी नहीं हटाया जाता है।

$(document).ready(function(){ 
    $('body').on('click','.myClickableElement',function(){ 
     ... event handler code .... 
    }); 
}); 

कुछ और स्पष्टीकरण:

.on() विधि event delegation का उपयोग करता है अपने ईवेंट हैंडलर कोड (3 तर्क) बनाए रखने के लिए एक माता पिता के तत्व बता, और यह आग जब घटना लक्ष्य (करने के लिए दूसरा तर्क) पर एक निश्चित प्रकार की घटना (पहला तर्क) किया गया है।

यदि आप 1.7 से पहले jQuery का संस्करण उपयोग कर रहे हैं तो अब delegate विधि को हटा दें जो अनिवार्य रूप से वही काम करता है।

इसके अलावा, यह ध्यान देने योग्य है कि डोम पेड़ के माध्यम से "बबल अप" घटनाओं के कारण, ईवेंट लक्ष्य (.on() विधि का दूसरा तर्क) प्रतिनिधि तत्व का एक वंशज होना चाहिए (jQuery ऑब्जेक्ट का चयनकर्ता)। उदाहरण के लिए, निम्नलिखित कार्य नहीं करेगा

<div id="container-1"> 
    <div> 
     <div id="another-div"> 
      Some Stuff 
     </div> 
    </div> 
</div> 

<div id="container-2"> 
    <a id="click-me">Event Target!!!</a> 
</div> 

<script type="text/javascript"> 
    $('#container-1').on('click','#click-me',function(){ 
     ... event handler code .... 
    }); 
</script> 

body या document तत्वों आमतौर पर सुरक्षित विकल्प हैं के बाद से पृष्ठ पर आम तौर पर हर तत्व एक वंशज है।

Answer 2

आप ईवेंट स्क्रिप्ट को डीआईवी में संलग्न कर सकते हैं और सामग्री को गतिशील रूप से लोड करने के बाद एक Replaceall कमांड चला सकते हैं।

<div class="somescript"> 
-- Event Script that you want to map with dnamically added content 
<div> 

- गतिशील रूप से अपनी सामग्री लोड करें और उसके बाद निम्न आदेश चलाएं।

$(".somescript").replaceAll($(".somescript")); 

गतिशील लोड सामग्री भरी हुई और चलाने कर दिया गया है आदेश की जगह हो जाने के बाद, घटनाओं मैप किया जाएगा और कोड ठीक चलेगा।