Событие JavaScript не срабатывает при вложенном в динамически добавленном

Question

Использование Play 2.3.x, я пытаюсь реализовать форму на основе одной из форм форм 2.2.x в Play !, которая динамически добавляет/удаляет поля, используя кнопку добавления/удаления, как описано в этом answer.

Я успешно реализовал кнопку удаления, которая удалит ее родителя div, используя имя класса и кнопку добавления, которая добавит новый div к форме на основе скрытого шаблона, используя идентификатор. Однако в каждый добавленный к странице элемент div событие JavaScript для кнопки вложенного удаления, похоже, не срабатывает или не распознается страницей. Я рассмотрел еще несколько вопросов (wrap with anonymous function, re-add control at page load и т. Д.) И обсудил с другими разработчиками, но по-прежнему не может решить проблему. Я работаю с JS уже около 2 недель, и вполне вероятно, что я не знаю правильной документации для обзора, чтобы найти разрешение. Любые советы относительно разрешения, объяснения причин дела и даже советы по лучшей практике кодирования будут оценены по достоинству.

Я снял игру! ссылки в попытке свести к минимуму сводится к проблеме, и предоставили executable версию одного и того же:

<div class="well weekly"> 
    <div class="alignRight"> 
     <a class="btn btn-default remove"><i class="glyphicon glyphicon-trash"></i></a> 
    </div> 
    <table class="formtable"><tbody> 
     <tr> 
      <td colspan="2">title</td> 
     </tr> 
     <tr> 
      <td>category</td> 
      <td>content</td> 
     </tr> 
    </table> 
</div> 

<div id="template" class="weeklyTemplate"> 
    <div class="alignRight"> 
     <a class="btn btn-default remove"><i class="glyphicon glyphicon-trash"></i></a> 
    </div> 
    <table class="formtable"><tbody> 
     <tr> 
      <td colspan="2">title</td> 
     </tr> 
     <tr> 
      <td>category</td> 
      <td>content</td> 
     </tr> 
    </table> 
</div> 

<a class="btn btn-primary add">Add</a> 

И это JavaScript для добавления и удаления кнопок:

<script> 
    $('.remove').on('click', function() { 
     $(this).parents('.weekly').remove(); 
    }); 

    $('.add').on('click', function() { 
     $("#template").before('<div class="well weekly">' + $('#template').html() + '</div>'); 
    }); 
</script> 

Answer 1

Присоединить их к родителю :

$('body').on('click', '.remove', function() { 
     $(this).parents('.weekly').remove(); 
    }); 

    $('body').on('click', '.add', function() { 
     $("#template").before('<div class="well weekly">' + $('#template').html() + '</div>'); 
    }); 

Таким образом click событие всплывает к родителю и мы поймаем его там, даже динамически создаваемых объектов.

Я использую селектор $('body') просто потому, что я не вижу из примера кода, который является правильным родителем. Возможно, вы захотите использовать $('#template') или $('.formtable') или какой-либо другой контейнер.

http://api.jquery.com/on/