Jquery evento click non funziona dopo il metodo append

Così ho questo pulsante che aggiunge una nuova riga alla tabella, tuttavia il mio problema è che non ascolta i .new_participant_form fare clic evento più dopo il metodo append ha avuto luogo.

http://jsfiddle.net/cTEFG/

Fare clic su Aggiungi Nuova Voce, quindi fare clic sul nome del Modulo.

$('#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> 
  • Il problema è che l’evento è associato solo al new_participant_form elemento che è già nel documento. Per farlo funzionare per elementi verranno aggiunti in seguito, è possibile utilizzare l’evento di delega, come dystroy ha dimostrato, o collegare il conduttore di ogni ancora prima di inserire (il primo è più efficiente).
InformationsquelleAutor Edward | 2013-03-14

 

3 Replies
  1. 176

    Utilizzare su :

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

    In modo che il click è delegata a qualsiasi elemento in #registered_participants avere la classe new_participant_form, anche se è stato aggiunto dopo aver legato il gestore di eventi.

    • C’è qualche svantaggio in termini di prestazioni, se si utilizza $(document).on('click', '.new_participant_form', function() {}); ?
    • C’è uno come jQuery, che dovrà gestire tutti i clic e non solo quello sul #registered_participants, ma ad essere onesti questo rallentamento è così piccolo, è irrilevante. Si tratta prevalentemente di meglio indirizzare le giuste elemento perché è più pulito.
  2. 24

    Il .on() metodo è utilizzato per delegare gli eventi di elementi, aggiunti dinamicamente o già presente nel 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>

    Leggi di più: http://api.jquery.com/on/

  3. 8

    Questo problema potrebbe essere risolto come detto, utilizzando il .on su jQuery 1.7+ versioni.

    Purtroppo, questo non funziona all’interno del mio codice (e ho 1.11) e quindi ho usato:

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

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

    Come jQuery 3.0, .delegato() è deprecato. E ‘ stato sostituito
    dall’ .on() metodo poiché jQuery 1.7, quindi il suo utilizzo è stato già
    scoraggiato. Per le versioni precedenti, tuttavia, rimane la più
    mezzo efficace per utilizzare l’evento di delega. Ulteriori informazioni sull’evento
    vincolante e che la delega il .on() metodo. In generale, questi sono
    l’equivalente di modelli per i due metodi:

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

    Questo commento possa aiutare gli altri 🙂 !

Lascia un commento