L'événement de clic Jquery ne fonctionne pas après la méthode append

Question

J'ai donc ce bouton qui ajoute une nouvelle ligne à la table, mais mon problème est qu'il n'écoute pas le bouton .new_participant_form après que la méthode d'ajout ait été appliquée.

http://jsfiddle.net/cTEFG/

Cliquez sur Ajouter une nouvelle entrée puis cliquez sur le nom du formulaire.

$('#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);

    });
});

HTML

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

Answer 1

Utilisez sur :

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

Pour que le clic soit délégué à n'importe quel élément dans #registered_participants avoir la classe new_participant_form même s'il est ajouté après que vous ayez lié le gestionnaire d'événements.

Answer 2

En .on() méthode est utilisé pour déléguer les événements aux éléments, ajoutés dynamiquement ou déjà présents dans le DOM :

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

Lire la suite : http://api.jquery.com/on/

Answer 3

Ce problème pourrait être résolu, comme mentionné, en utilisant la fonction .on sur les versions jQuery 1.7+.

Malheureusement, cela n'a pas fonctionné dans mon code (et j'ai la 1.11) donc j'ai utilisé :

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

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

Depuis la version 3.0 de jQuery, .delegate() a été déprécié. Elle a été remplacée par la méthode .on() depuis jQuery 1.7, son utilisation était donc déjà déconseillée. Cependant, pour les versions antérieures, elle reste le moyen le plus efficace d'utiliser la délégation d'événements. moyen le plus efficace d'utiliser la délégation d'événements. Plus d'informations sur les événements et la délégation se trouvent dans la méthode .on(). En général, ce sont les modèles équivalents pour les deux méthodes :

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

Ce commentaire pourrait aider d'autres personnes :) !

Answer 4

ESSAYEZ-LE

À partir de la version 1.7+ de jQuery, la méthode on() est le nouveau remplacement des méthodes bind(), live() et delegate().

ALORS AJOUTEZ CECI,

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

Ou pour plus d'informations VÉRIFIER ICI

Answer 5

** Voici la solution, qui pourrait vous aider **

// Changed to delegate() method to use delegation from the body

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