परिशिष्ट विधि के बाद Jquery क्लिक इवेंट काम नहीं कर रहा है

Question

इसलिए मेरे पास यह बटन है जो तालिका में एक नई पंक्ति जोड़ता है, हालांकि मेरी समस्या यह है कि यह .new_participant_formएपेंड विधि के लागू होने के बाद अब क्लिक इवेंट को नहीं सुनता है।

http://jsfiddle.net/cTEFG/

Add New Entry पर क्लिक करें फिर फॉर्म नाम पर क्लिक करें।

$('#add_new_participant').click(function() {


    var first_name = $('#f_name_participant').val();
    var last_name = $('#l_name_participant').val();
    var role = $('#new_participant_role option:selected').text();
    var email = $('#email_participant').val();


    $('#registered_participants').append('<tr><td><a href="#" class="new_participant_form">Participant Registration</a></td><td>'+first_name+ ' '+last_name+'</td><td>'+role+'</td><td>0% done</td></tr>');

    });

    $('.new_participant_form').click(function() {

        var $td = $(this).closest('tr').children('td');

        var part_name = $td.eq(1).text();
        alert(part_name);

    });
});

एचटीएमएल

<table id="registered_participants" class="tablesorter">

<thead>
<tr> 
<th>Form</th>
<th>Name</th>
<th>Role</th>
<th>Progress </th>


</tr> 
</thead>


<tbody>
<tr> 
<td><a href="#" class="new_participant_form">Participant Registration</a></td>
<td>Smith Johnson</td>
<td>Parent</td>
<td>60% done</td>


</tr> 
</tbody>

</table>

<button id="add_new_participant"></span>Add New Entry</button> 

Comments

समस्या यह है कि घटना केवल उस new_participant_formतत्व से जुड़ी है जो पहले से ही दस्तावेज़ में है। आपके द्वारा बाद में जोड़े जाने वाले तत्वों के लिए इसे काम करने के लिए, आप इवेंट डेलिगेशन का उपयोग कर सकते हैं, क्योंकि dystroy ने प्रदर्शन किया है, या इसे डालने से पहले प्रत्येक एंकर को हैंडलर संलग्न करें (पूर्व अधिक कुशल है)।

— असद सईदुद्दीन

Answer 1

का प्रयोग करें पर :

$('#registered_participants').on('click', '.new_participant_form', function() {

ताकि #registered_participantsवर्ग होने में किसी भी तत्व पर क्लिक को प्रत्यायोजित किया जाता है new_participant_form, भले ही आप ईवेंट हैंडलर को बाध्य करने के बाद इसे जोड़ा गया हो।

Comments

क्या प्रदर्शन के संबंध में कोई नुकसान है, यदि आप उपयोग करते हैं $(document).on('click', '.new_participant_form', function() {});?

— बेसजेरो

@basZero एक है, क्योंकि jQuery के बाद सभी क्लिक को संभालना होगा और न केवल एक पर #registered_participantsबल्कि निष्पक्ष होने के लिए इस मंदी इतनी छोटी है कि यह अप्रासंगिक है। यह ज्यादातर सही तत्व को लक्षित करने के लिए बेहतर है क्योंकि यह क्लीनर है।

— डेनसिटी सेगुरेट

Answer 2

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

// STATIC-PARENT              on  EVENT    DYNAMIC-CHILD
$('#registered_participants').on('click', '.new_participant_form', function() {

  var $td = $(this).closest('tr').find('td');
  var part_name = $td.eq(1).text();
  console.log( part_name );

});


$('#add_new_participant').click(function() {

  var first_name = $.trim( $('#f_name_participant').val() );
  var last_name  = $.trim( $('#l_name_participant').val() );
  var role       = $('#new_participant_role').val();
  var email      = $('#email_participant').val();
  
  if(!first_name && !last_name) return;

  $('#registered_participants').append('<tr><td><a href="#" class="new_participant_form">Participant Registration</a></td><td>' + first_name + ' ' + last_name + '</td><td>' + role + '</td><td>0% done</td></tr>');

});

<table id="registered_participants" class="tablesorter">
  <thead>
    <tr>
      <th>Form</th>
      <th>Name</th>
      <th>Role</th>
      <th>Progress </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#" class="new_participant_form">Participant Registration</a></td>
      <td>Smith Johnson</td>
      <td>Parent</td>
      <td>60% done</td>
    </tr>
  </tbody>
</table>

<input type="text" id="f_name_participant" placeholder="Name">
<input type="text" id="l_name_participant" placeholder="Surname">
<select id="new_participant_role">
  <option>Parent</option>
  <option>Child</option>
</select>
<button id="add_new_participant">Add New Entry</button>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

और पढ़ें: http://api.jquery.com/on/

Answer 3

जैसा कि .onjQuery के 1.7+ संस्करणों का उपयोग करके इस समस्या को हल किया जा सकता है ।

दुर्भाग्य से, यह मेरे कोड के भीतर काम नहीं करता था (और मेरे पास 1.11 है) इसलिए मैंने उपयोग किया:

$('body').delegate('.logout-link','click',function() {

http://api.jquery.com/delegate/

JQuery 3.0 के रूप में .delegate () को हटा दिया गया है। इसे jQuery 1.7 से .on () विधि द्वारा अधिगृहीत किया गया था, इसलिए इसका उपयोग पहले से ही हतोत्साहित किया गया था। हालांकि, पूर्व संस्करणों के लिए, यह घटना के प्रतिनिधिमंडल का उपयोग करने के लिए सबसे प्रभावी साधन बना हुआ है। इवेंट बाइंडिंग और डेलिगेशन पर अधिक जानकारी .on () विधि में है। सामान्य तौर पर, ये दो तरीकों के लिए समान टेम्पलेट हैं:

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

यह टिप्पणी दूसरों की मदद कर सकती है :)!

Answer 4

** समस्या का हल ** // प्रतिनिधि से बदला () शरीर से प्रतिनिधिमंडल का उपयोग करने की विधि

$("body").delegate("#boundOnPageLoaded", "click", function(){
   alert("Delegated Button Clicked")
});

Comments

प्रतिनिधि 3.0 संस्करण में पदावनत किया गया था। इसलिए इसके बजाय ऑन () विधि का उपयोग करें।

— मनोज

Answer 5

इसे इस्तेमाल करे

JQuery के संस्करण 1.7+ के अनुसार, ऑन () विधि बाइंड (), लाइव () और डेलिगेट () तरीकों के लिए नया प्रतिस्थापन है।

एसओ जोड़ें,

$(document).on("click", "a.new_participant_form" , function() {
      console.log('clicked');
});

या अधिक जानकारी के लिए यहां क्लिक करें