JQuery：on無法正常工作

Question

我已經創建了動態html按鈕，我想為它們設置click事件。 這是我的html輸出和代碼：

   <td style="width:90px;">
<input type="button" class="btn_Yeni" id="btnYeni"></td>

---

$(".btn_Yeni").on("click", function () {
    alert('asd');
});

$(".btn_Yeni").trigger("click");

單擊按鈕后沒有任何反應。 你有什么建議嗎？

Answer 1

由於html按鈕是動態添加的，因此您需要使用event delegation來注冊事件處理程序，如：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', '.btn_Yeni', function(event) {
     alert('asd'); 
});

UPDATE

因為，按鈕被添加到表格單元格中，如HTML標記中所示，您可以這樣做：

$('#tableID').on('click', '.btn_Yeni', function(event) {
     alert('asd'); 
});

這會將您的事件附加到#tableID元素中的任何按鈕，從而減少了檢查整個document元素樹和提高效率的范圍。

Answer 2

由於您有動態按鈕，因此需要使用事件委派。

僅使用.on（）來注冊事件處理程序不會使用事件委托 ， 它有一個非常特定的格式來使用事件委托。 事件應附加到頁面中已存在的元素（如下面的文檔對象），然后必須將動態元素選擇器作為第二個參數傳遞給on()方法

$(document).on("click", ".btn_Yeni", function () {
    alert('asd');
});

Answer 3

這是使用動態元素時的方法。

$("body").on("click",".btn_Yeni", function () {
    alert('asd');
});

怎么做：

處理程序沒有附加到元素本身（因為它在注冊時不存在） - 所以你將處理程序附加到body元素。 並通過事件冒泡 - 委托元素到達body （處理程序實際連接到的位置）時被檢查（反對）。

Answer 4

我已經為您提供了一個小提琴，可以探索動態按鈕添加以及使用on方法進行事件委派。

<ul id="btnCollection">
    <li>
        <input type="button" class="btn_Yeni" value="Your Button" />
    </li>
</ul>

var button = $("#btnCollection:last-child").html();

$("#btnCollection").on("click", ".btn_Yeni", function (event) {
    alert("Adding another button");

    $("#btnCollection").append(button);

});

http://jsfiddle.net/itanex/yak7c/

Answer 5

DEMO 在此輸入鏈接描述

$(document).on("click", ".btn_Yeni", function () {
    alert('asd');
});
function addrow(){
 var $tr = $("#baserow")   
 var $clone=$tr.clone();
 $tr.after($clone);    
}