您可以使用jQuery提供的以下两种方法:
第一种方法是
.live()
方法,另一种是
.delegate()
方法。
第一种方法的使用非常简单:
$(document).ready(function() {
$("#dynamicElement").live("click", function() {
});
}
如您所见,第一个参数是您想要绑定的事件,第二个参数是处理该事件的函数。它的工作方式并不完全像“重新渲染”。通常的做法(
$("#dynamicElement").click(...)
或
$("#dynamicElement").bind("click", ...)
)是在 DOM 正确加载后(
$(document).ready(...)
),将确定事件的事件处理程序附加到 DOM 元素上。现在,显然,这对于动态生成的元素不起作用,因为它们在 DOM 第一次加载时不存在。
.live() 的工作方式是,它不是将事件处理程序附加到 DOM 元素本身,而是将其与 document 元素一起附加,利用 JS 和 DOM 的冒泡属性(当您单击动态生成的元素并且没有附加事件处理程序时,它会继续向上查找直到找到一个)。
听起来很棒,对吧?但是这种方法有一个小的技术问题,正如我所说,它将事件处理程序附加到 DOM 顶部,因此当您单击该元素时,您的浏览器必须在整个 DOM 树中遍历,直到找到适当的事件处理程序。顺便说一下,这个过程非常低效。这就是出现 .delegate() 方法的地方。
让我们假设以下 HTML 结构:
<html>
<head>
...
</head>
<body>
<div id="links-container">
<!-- Here's where the dynamically generated content will be -->
</div>
</body>
</html>
因此,使用.delegate()方法,您可以将事件处理程序附加到父DOM元素,而不是绑定到DOM顶部。您可以选择一个DOM元素,确保它位于动态生成的内容在DOM树中的某个位置上方。越靠近它们,这将工作得越好。所以,这应该可以做到:
$(document).ready(function() {
$("#links-container").delegate("#dynamicElement", "click", function() {
});
}
这个回答有点长,但我喜欢解释它的理论哈哈。
编辑:你应该纠正你的标记,因为:1)锚不允许使用value属性,2)你不能拥有两个或多个具有相同ID的标签。试试这个:
<a class="removeLineItem" id="delete-1">Delete</a>
<a class="removeLineItem" id="delete-2">Delete</a>
<a class="removeLineItem" id="delete-3">Delete</a>
为了确定哪个锚点被点击了
$(document).ready(function() {
$("#links-container").delegate(".removeLineItem", "click", function() {
var anchorClicked = $(this).attr("id"),
valueClicked = anchorClicked.split("-")[1];
});
}
使用这段代码,您将在anchorClicked变量中存储所点击链接的id,在valueClicked中存储与该链接相关联的数字。