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模板發生衝突

回答

相關問題