使用 Handlebars 模板不会触发 Jquery 点击事件答案

【问题标题】：Jquery click event doesn't fire with Handlebars template使用 Handlebars 模板不会触发 Jquery 点击事件
【发布时间】：2017-08-25 16:35:13
【问题描述】：

我对 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();
});

当我将此模板添加到文档时，单击事件不会触发。问题是什么？

【问题讨论】：

如果有效，请发布答案。我在使用带有把手的 mousemove 事件时遇到了类似的问题。

标签： javascript php jquery html frontend

【解决方案1】：

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

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

【讨论】：

不起作用 .... 没有解释问题，您能否详细说明。当前的问题是什么？您在控制台中看到任何错误吗？
什么都没有。当我点击动态添加的按钮时，没有错误，没有任何动作。但是按钮，在服务器（非动态）操作（警报）中呈现的内容可以正常工作。

【解决方案2】：

您尝试将事件处理程序附加到 DOM 结构中不存在的元素。在添加on('click') 之前尝试控制台日志$('.service')。您需要使用事件委托：https://learn.jquery.com/events/event-delegation/ 所以在你的情况下：

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

【讨论】：

我尝试了 $(document) - 不起作用。并且元素存在于DOM中。
尝试使用不同的 HTML 事件，例如 'mousedown' 或 'mouseover'，也许有什么东西阻止了事件冒泡
不，“鼠标悬停”也不起作用:(我不知道，为什么这个委托事件不起作用..
您需要帮助我们来帮助您，创建一些 jsFiddle 并将 URL 粘贴到您的问题中

【解决方案3】：

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

试试这个

【讨论】：

尝试过（和文档，其他父元素），没有（