Jquery click event doesn't fire with Handlebars template

Question

I have a problem with Jquery .on() function and Handlebars template. I wroted Handlebars template and add him dynamically in document:

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

This template has a button:

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

So I wroted click handler on this button:

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

When I add this template to document, click event doesn't fire. What is the problem?

Answer 1

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

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

Answer 2

You try to attach the event handler to an element which doesn't exists in your DOM structure. Before adding on('click') try to console log $('.service') . You need to use event delegation: https://learn.jquery.com/events/event-delegation/ So in your case:

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

Answer 3

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

Try this