JQuery: on 不能正常工作答案

【问题标题】：JQuery: on doesn't work properlyJQuery: on 不能正常工作
【发布时间】：2013-11-05 07:13:57
【问题描述】：

我创建了动态 html 按钮，我想为它们设置点击事件。这是我的 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");

单击按钮后没有任何反应。你有什么建议吗？

【问题讨论】：

请参阅这些先前的答案，了解如何使用委托事件处理来解决您的问题。您需要以不同的方式使用.on()：stackoverflow.com/questions/8752321/…、stackoverflow.com/questions/9985090/…、stackoverflow.com/questions/9814298/…。

标签： javascript jquery asp.net jquery-ui

【解决方案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 元素树的范围并提高效率。

【讨论】：

将事件委托绑定到文档不是一个明智的选择。您应该更靠近将触发事件的元素。

【解决方案2】：

由于您有动态按钮，因此您需要使用事件委托。

仅使用 .on() 注册事件处理程序并没有使用事件委托，它有一个非常特定的格式来使用事件委托。该事件应附加到页面中已经存在的元素（如以下情况中的文档对象），然后必须将动态元素选择器作为第二个参数传递给on()方法

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

【讨论】：

【解决方案3】：

这是使用动态元素时的方法。

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

它是怎么做的：

处理程序不附加到元素本身（因为它在注册时不存在） - 所以你将处理程序附加到body 元素。并通过事件冒泡 - 当委托元素到达body（处理程序实际附加到的位置）时，它会被检查（反对）。

【讨论】：

最好将其附加到最近的静态父级而不是body。
@ahren 不，你不知道是否有人/js/plugin 操纵了你所谓的：“静态最接近”。把它放在一个身体里是最好的方法。 PS：用LIVE做的文件就可以了。（离身体很远）。

【解决方案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/

【讨论】：

【解决方案5】：

DEMOenter link description here

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

【讨论】：