Jquery cliquez sur l'événement pas de travail après la méthode append

J'ai donc ce bouton qui ajoute une nouvelle ligne à la table, cependant mon problème est qu'il n'écoute pas la .new_participant_form cliquez sur l'événement plus après la méthode append a eu lieu.

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>
  • Le problème est que l'événement est uniquement lié à la new_participant_form élément qui est déjà dans le document. Pour le faire fonctionner pour les éléments vous permettra d'ajouter plus tard, vous pouvez utiliser l'événement de la délégation, comme dystroy a démontré, ou de fixer le gestionnaire de chaque ancre avant de l'insérer (le premier est plus efficace).
InformationsquelleAutor Edward | 2013-03-14
  1. 185

    Utilisation sur :

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

    De sorte que le clic est déléguée à tout élément dans #registered_participants avoir la classe new_participant_form, même si elle est ajoutée après avoir lié le gestionnaire d'événement.

    • Est-il un inconvénient en ce qui concerne les performances, si vous utilisez $(document).on('click', '.new_participant_form', function() {}); ?
    • Il y en a un que jQuery serait alors avoir à gérer tous les clics et pas seulement sur le #registered_participants mais pour être juste, ce ralentissement est si petit qu'il est hors de propos. Il est surtout préférable de cibler le bon élément, car c'est plus propre.
    InformationsquelleAutor Denys Séguret
  2. 29

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

    JS:

    //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>');

});

    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>

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

    InformationsquelleAutor Roko C. Buljan
  3. 9

    Ce problème pourrait être résolu comme mentionné à l'aide de la .on sur jQuery 1.7+ versions.

    Malheureusement, cela ne fonctionne pas dans mon code (et j'ai 1.11) j'ai donc utilisé:

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

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

    De jQuery 3.0, .délégué() a été désapprouvée. Il a été remplacé
    par la .sur() la méthode depuis jQuery 1.7, de sorte que son utilisation était déjà
    découragés. Pour les versions antérieures, cependant, il reste le plus
    moyen efficace pour l'utilisation de la délégation. Plus d'informations sur l'événement
    la liaison et de la délégation de l' .sur() la méthode. En général, ce sont
    l'équivalent des modèles 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 peut aider les autres 🙂 !

    InformationsquelleAutor Rick Sanchez