Question

我想将一个事件监听器（例如'click'）附加到以编程方式添加的javascript生成的代码（表的每一行）。通常，我通常会使用jQuery dirty on方法，但它不起作用（似乎我的选择器太具体了。我不知道以任何方式这样做... < / p>

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做到这一点？

谢谢！

Answer 1

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

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

Answer 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);

如何将事件监听器附加到javascript生成的html标记？

2 个答案: