HandlebarsテンプレートでJqueryのクリックイベントが発生しない

Question

Jquery .on（）関数とHandlebarsテンプレートに問題があります。私はハンドルテンプレートをwrotedし、文書に動的に彼を追加します。私は追加すると

$('.service').on('click', '.delete-service', function (e) { 
    alert('Clicked'); 
    //$(this).parent().parent().remove(); 
}); 

：

$('.services-wrapper').append(serviceTemplate({index : ++maxIndex})); 

をこのテンプレートにはボタンがあります。

<p> 
    <?= Html::buttonInput('Delete', [ 
    'class' => 'btn btn-danger delete-service', 
    'id' => 'js-delete-service', 
     'data' => [ 
     'index' => $index, 
    ], 
    ]) ?> 
</p> 

だから私は、このボタンのハンドラをクリックしwrotedこのテンプレートを文書化するには、イベントは発生しません。何が問題ですか？

Answer 1

としてあなたは最も近い親ラッパーが必要になる場合があります：あなたは、あなたのDOM構造に存在しない要素にイベントハンドラを添付しよう

$('.service-wrapper').on(...); 

Answer 2

。 on('click')を追加する前にコンソールログ$('.service')を試してください。あなたは、イベントの委任を使用する必要があります。https://learn.jquery.com/events/event-delegation/ だからあなたの場合：

$(".service-wrapper").on("click", ".delete-service", function(event) { 
    event.preventDefault(); 
    alert('Clicked'); 
}); 

Answer 3

$("body").on('click','.delete-service',function(){ 
    alert('Clicked'); 
}); 

は動作しません、この