jquery事件不识别js添加的html组件？

Question

我正在使用js将表单元素添加到html文档中。例如，我将整个<form>添加到表格单元格中。例如：

<form class="add-comment"><input type="submit" /></form>

我尝试使用js根据新创建的表单中的元素调用事件，但没有任何反应。我应该得到一个警报框。我做错了什么？

$('.add-comment').submit(function() {
  alert('form submitted!');
});

感谢。 希望我解释得很好。

Answer 1

您是否在注册提交事件处理程序后添加元素？除非使用实时方法添加事件，否则您需要在每个新元素之后注册事件。

$('.add-comment').live('submit', function() {
    alert('form submitted!');
});

这会为所有选定元素添加事件，即使将来会添加它们。

http://api.jquery.com/live/

Answer 2

新创建的元素没有附加任何事件处理程序。您必须选择它们并在添加后添加事件处理程序（例如$('.add-comment', newparent).submit(submitfunction)）。

您通常可以使用.live(eventname, function)为现有的和以后创建的元素添加事件处理程序。但是你不能在jQuery 1.3中使用.live('submit', ...)，因为这些事件是如何在浏览器中实现的（从技术上讲，它们不会'冒泡'）。

jQuery 1.4确实支持live对submit（通过一个非常难看的黑客攻击）。

Answer 3

如果您没有使用jQuery 1.4，我已经写了rather long blog post。您必须连接新添加的元素，因为它们在页面加载时不存在。它应该让您深入了解.live()方法发生的情况。

Answer 4

当然，将事件添加到元素是最常见的最差实践。尝试了解发布/订阅样式事件处理，它可以取代使用实时插件。

Answer 5

凯尔是对的，您应该使用直播事件向当前和未来的DOM元素添加事件。但是，作为替代方法，您可以在创建表单元素时添加事件：

（jQuery 1.4风格）

$('<form>', {
    id: 'myFormID',
    name: 'myFormName'
}).submit(function(){ alert('form submitted'); })
.appendTo(myDiv);