jQuery Click事件不會與Handlebars模板一起觸發

Question

我對Jquery .on（）函數和Handlebars模板有問題。 我編寫了Handlebars模板，並在文檔中動態添加了他：

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

該模板具有一個按鈕：

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

因此，我在此按鈕上編寫了點擊處理程序：

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

當我將此模板添加到文檔中時，不會觸發click事件。 問題是什么？

Answer 1

您可能需要一個最接近的父包裝器，例如：

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

Answer 2

您嘗試將事件處理程序附加到DOM結構中不存在的元素。 在添加on('click')之前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');
});

嘗試這個