1

有时我的 jQuery 脚本会嵌套单击事件，因为我需要单击事件来操作第一个单击事件创建的元素

$(selector).click(function(){
    //do something such as create an element
    $(selector).click(function(){
        //do something with the created element
    });
});

这感觉像糟糕的风格。有没有更好的方法来做到这一点？

4

3 回答 3

4

如果您使用的是 jQuery 1.7 或更高版本，请使用on()：

$(document).on('click', selector, function(){
  //do something
});

这会将单击事件绑定到选定元素并自动将其添加到新元素。

off()相反。

于 2013-08-13T10:59:01.057 回答
2

这可能是一件非常好的事情。

或者，您可以查看事件委托。on（和较旧的delegate）提供。事件委托通过将事件（在您的情况下为click）挂接到已经存在的祖先容器元素上来工作，但是在挂接它时使用选择器来匹配您要放入该容器中的元素。当事件冒泡到祖先时，jQuery 将选择器与它经过的元素进行比较，当有匹配时调用事件处理程序，就好像处理程序直接附加到元素一样。

这是一个例子：

HTML：

<table id="myTable"><tbody></tbody></table>

如您所见，该表中没有行。但我可以这样做：

$("#myTable").on("click", "tr", function() {
    alert("You clicked row #" + $(this).index());
});

...然后根据需要添加行：

for (var i = 0; i < 5; ++i) {
    $("#myTable tbody").append("<tr><td>Hi there, click me</td></tr>");
}

实例| 直播源

于 2013-08-13T10:57:55.537 回答
0

您可以使用类似 jQuery 的委托方法

前任：

<html lang="en">
<head>
<meta charset="utf-8">
<title>delegate demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$( "body" ).delegate( "p", "click", function() {
$( this ).after( "<p>Another paragraph!</p>" );
});
</script>
</body>
</html>
于 2013-08-13T10:58:58.767 回答