如何将事件侦听器附加到 JavaScript 生成的 html 标记？答案

【问题标题】：How to attach an event listener to a JavaScript generated html tag?如何将事件侦听器附加到 JavaScript 生成的 html 标记？
【发布时间】：2014-01-22 17:46:32
【问题描述】：

我想将事件侦听器（例如“点击”）附加到以编程方式添加的 JavaScript 生成代码（表格的每一行）。通常，我通常会使用 jQuery 脏 on 方法来做到这一点，但它不起作用（似乎我的选择器太具体了。我不知道有什么方法可以用另一种方式做到这一点......

var STD.prototype.addTableWithEvent(id, eventName, eventFunction)
{
    var ident = "webapp_table_"+ id;
    var table = angular.element("<table id=\"#"+ ident +"\"></table>");
    var line = angular.element("<tr></tr>");

    // this is the line not working
    jQuery("body").on(eventName, '#'+ ident +' tr', { std: this }, eventFunction);

    line.appendTo(table);
    this.$compile(table)(this.$scope);
    table.appendTo('body');
};

然后以这种方式调用此函数：

 var std = new STD();
 std.addTable("example", "click", function() { console.log("working"); });

表格很好添加到页面，但是点击的时候没有调用事件函数。如果我为此改变：

jQuery("body").on(eventName, 'tr', { std: this }, eventFunction);

然后它可以工作，但对于每张桌子，这不是我想要的。有没有办法用 Angular.js 或 jQuery 做到这一点？

【问题讨论】：

$.on根本不是脏。
@moonwave99 很脏，因为我觉得它很脏。

标签： javascript jquery angularjs jquery-events

【解决方案1】：

尝试将事件附加到表格而不是正文，并将选择器设置为将其委托给 <tr> 元素，如下所示：

 table.on(eventName, 'tr', { std: this }, eventFunction);

【讨论】：

是的，它有效，但认为它不会，因为表格也是 javascript 生成的！ :)
其实我是直接用的：table.on(eventName, 'tr', { std: this }, eventFunction);

【解决方案2】：

您的代码：

jQuery("body").on(eventName, 'tr', { std: this }, eventFunction);

将为您页面上的每个<tr> 元素（所有表格）附加一个事件处理程序。要缩小范围并更具体，只需使用标准 css 选择器来缩小选择范围。

像这样：

jQuery("body").on(eventName, '#desiredTableID tr', { std: this }, eventFunction);

或

jQuery(document).on(eventName, '#desiredTableID tr', { std: this }, eventFunction);

【讨论】：

看我的代码，这正是我正在做的，它不起作用。
很高兴你明白了。老实说，我认为您也可以通过.on() 绑定到document 并指定您想要定位的精确表的tr 来解决它。但是，很高兴它解决了。通常，当您修改 DOM 元素（在您的情况下，通过 append 方法修改 DOM 元素）时，您必须使用 .on() against a DOM object or element higher in the hierarchy。此外，如果整个页面上的所有tr 元素都在触发，那么更具体，如上所述。希望你能尝试一下。
是的，也许我应该在绑定事件之前将它添加到 DOM 中，这样它就可以工作了。