Событие щелчка jquery не работает после метода добавления

82

Итак, у меня есть эта кнопка, которая добавляет новую строку в таблицу, однако моя проблема в том, что она больше не слушает .new_participant_formсобытие щелчка после того, как сработал метод добавления.

http://jsfiddle.net/cTEFG/

Щелкните Добавить новую запись, затем щелкните имя формы. 

$('#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>
jquery html Эдвард
источник
Проблема в том, что событие прикрепляется только к new_participant_formэлементу, который уже есть в документе. Чтобы он работал для элементов, которые вы также добавите позже, вы можете использовать делегирование событий, как продемонстрировал dystroy, или прикрепить обработчик к каждой привязке перед ее вставкой (первое более эффективно).
Asad Saeeduddin

Ответы:

209

Использовать на :

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

Таким образом, щелчок делегируется любому элементу, #registered_participantsимеющему класс new_participant_form, даже если он добавлен после привязки обработчика событий.

Дени Сегюре
источник
4
Есть ли недостаток в производительности, если вы используете $(document).on('click', '.new_participant_form', function() {});?
basZero
3
@basZero Есть один, поскольку jQuery тогда должен будет обрабатывать все щелчки, а не только один, #registered_participantsно, честно говоря, это замедление настолько мало, что не имеет значения. В большинстве случаев лучше выбрать правильный элемент, потому что он чище.
Denys Séguret
35

.on()Метод используется для делегирования событий к элементам, динамически добавлены или уже присутствующих в 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>
Развернуть фрагмент

Подробнее: http://api.jquery.com/on/

Роко С. Бульян
источник
10

Как уже упоминалось, эта проблема может быть решена с использованием .onверсий jQuery 1.7+.

К сожалению, это не сработало в моем коде (а у меня 1.11), поэтому я использовал:

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

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

Начиная с jQuery 3.0, .delegate () устарел. Он был заменен методом .on () начиная с jQuery 1.7, поэтому его использование уже не поощрялось. Однако для более ранних версий наиболее эффективным способом использования делегирования событий остается. Более подробная информация о привязке и делегировании событий находится в методе .on (). В общем, это эквивалентные шаблоны для двух методов:

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

Этот комментарий может помочь другим :)!

W.Doch
источник
2

** Проблема решена ** введите описание изображения здесь // Изменен метод delegate () для использования делегирования из тела

$("body").delegate("#boundOnPageLoaded", "click", function(){
   alert("Delegated Button Clicked")
});
Ашвани Гарг
источник
Метод delegate () устарел в версии 3.0. Поэтому используйте вместо этого метод on ().
Manoj
1

ПОПРОБУЙ ЭТО

Начиная с версии jQuery 1.7+, метод on () является новой заменой методов bind (), live () и delegate ().

ТАК ДОБАВЬТЕ ЭТО,

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

Или для получения дополнительной информации ПРОВЕРИТЬ ЗДЕСЬ

Манодж
источник