jquery点击事件不会与Handlebars模板发生冲突

我遇到了Jquery .on（）函数和Handlebars模板的问题。我wroted把手模板，动态添加他在文件：jquery点击事件不会与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>

所以我wroted点击该按钮处理程序：

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

当我添加这个模板文件，点击事件不会触发。问题是什么？

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

来源

2017-03-31 illatif

，你可能需要一个最接近的父包装。在添加on('click')之前，尝试使用控制台日志$('.service')。您需要使用事件代表团：https://learn.jquery.com/events/event-delegation/ 所以你的情况：

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

来源

2017-03-31 12:00:13 Jai

不，不行。 – illatif

_doesn't work_ ....没有解释这个问题，你可以详细说明一下。目前的问题是什么？你在控制台中看到任何错误吗？ – Jai

没什么。没有错误，当我点击动态添加按钮时没有任何操作。但按钮，在服务器（而不是动态）行动（警报）渲染的东西很好。 – illatif

您尝试将事件处理程序附加到不存在于你的DOM结构中的元素：

来源

2017-03-31 12:02:21 Oskar

我尝试了$（文档） - 不起作用。 DOM中存在元素。 – illatif

尝试使用不同的HTML事件，如'mousedown'或'mouseover'，也许某事正在停止事件冒泡 – Oskar

不，'mouseover'也不起作用:(我不知道，为什么这个委托事件不起作用。 – illatif

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

试试这个

来源

2017-03-31 12:13:34

Tryed（和文档，其他父元素），nope（ – illatif

jquery点击事件不会与Handlebars模板发生冲突

回答

相关问题