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

我想附加一个事件监听器（例如'点击'）以编程方式添加JavaScript生成的代码（表中的每一行）。通常情况下，我通常会做的与jQuery脏on方法，但它不工作（看来我的选择实在是太多了具体的我不知道任何方式以另一种方式做到这一点...如何将事件侦听器附加到javascript生成的html标记？

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

谢谢！

来源

2014-01-22 Julien Fouilhé

'$ .on'is不_dirty_可言。 – moonwave99

@ moonwave99肮脏，因为我觉得脏使用它。 –

尝试将事件附加表中的，而不是身体，并设置选择将其委托给<tr>元素，就像这样：

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

来源

2014-01-22 17:56:14

是的，它认为它不会像表中生成的JavaScript一样！ :) –

事实上，我不得不直接使用：'table.on（eventName，'tr'，{std：this}，eventFunction）;' –

您的代码：

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

来源

2014-01-22 17:59:44 gibberish

看看我的代码，这正是我所做的，它不会没有工作。 –

很高兴你明白了。老实说，我认为你也可以通过'.on（）'绑定到'document'并指定你想要的目标的精确表'tr'来解决它。但是，它很快乐就解决了。一般来说，当你修改一个DOM元素（body，在你的情况下，通过'append'方法），你必须使用'.on（）'[针对DOM对象或层次结构中较高的元素]（http：// stackoverflow .COM /问题/ 1687296 /什么，是-DOM事件授）。另外，如果整个页面上的所有'tr'元素都触发了，那么就更具体一些，如上所述。希望你稍微尝试一下。 – gibberish

是的，可能是我应该在绑定事件之前将它添加到DOM，它会起作用。 –

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

回答

相关问题