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'); 
});

<强>更新

因为，按钮被添加到表格单元格中，如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

样本enter link description here

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

JQuery：on无法正常工作

5 个答案: