Jquery Klick-Ereignis nicht mit Handlebars Vorlage

Question

Ich habe ein Problem mit Jquery .On() -Funktion und Lenker Vorlage. Ich wroted Vorlage Lenker und fügen Sie ihn dynamisch in dem Dokument:

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

Diese Vorlage eine Schaltfläche hat:

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

So wroted I-Handler auf diese Schaltfläche klicken:

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

Als ich hinzufügen Diese Vorlage zu dokumentieren, klicken Sie auf Ereignis nicht ausgelöst. Was ist das Problem?

Answer 1

Sie können einen nächsten übergeordneten Wrapper benötigen wie:

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

Answer 2

Sie versuchen, den Event-Handler auf ein Element zu befestigen, die nicht in Ihrem DOM-Struktur nicht vorhanden ist. Bevor Sie on('click') hinzufügen, versuchen Sie, das Protokoll $('.service') zu trösten. Sie müssen Ereignis Delegation verwenden: https://learn.jquery.com/events/event-delegation/ Also in Ihrem Fall:

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

Answer 3

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

Versuchen Sie, diese