<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-3.2.0.min.js"></script>
<style>
li{
margin-bottom: 5px
}
</style>
</head>
<body>
<p>每次点击都创建一个li标签，动态给创建的li标签添加点击事件。</p>
<button>创建</button>
<ul></ul>
<script>
$(function(){
//创建li事件
$("button").click(function(event) {
var li = $("<li>").text("点击我!")
$("ul").append(li)
})
//为每个新创建的li绑定点击事件
$("body").on('click', 'li', function(event) {
var txt = "这是第"+($(this).index()+1)+"个li标签"
alert(txt)
})
})
</script>
</body>
</html>
我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。参考：http://api.jquery.com/live/
以前我们定义事件，比如为元素定义单击事件是这样写的：
复制代码
代码如下:
$('input').click(function
()
{
//处理代码
})
或
复制代码
代码如下:
$('.clickme').bind('click',
function()
{
//
Bound
handler
called.
})
但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。即使你使用jquery的clone函数，它并不能将事件也复制（到目前为止我还不清楚它是为什么这样定义，是没法复制还是刻意这么处理，以防止出现某些异常，这还有待去分析一下jquery的源代码）。
现在，使用live你可以轻松搞定，
$('.clickme').live('click',
function()
{
//
Live
handler
called.
})这样，你即使在后面动态插入的元素，也会被绑定事件，$('body').append('<div
class="clickme">Another
target</div>')
要看看你是怎么“动态添加”元素的。 如果你的元素是用click事件append进来的 那你的功能函数必须放在这个click事件里面。 比如： $(".clickMeToAppendElement").click(function() { $(".toBeAppend").append("这是元素内容")$(".J_classtree")欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）