jquery 给动态生成的标签绑定事件的几种方法总结

2020-05-24 21:35:30易采站长站整理

/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2").bind('click', function() {
/* 显示标签的内容 */
alert($(this).text()); ///这种方式也可以正常打印出 hello
});
});

})
</script>

这种方式是可以解决上面问题的。虽然它用的也是bind方法,但是注意,它是先有目的标签对象然后才调用的bind方法,所以也是好用的。而且它居然可以正常打印自己的信息,非常厉害。

方法三:


<body>
<!-- 下面是用纯动态方式生成标签 -->
<div id="d1">
测试静态标签的绑定方法
</div>
<br />

<div id="d2">
动态生成a标签的位置
</div>
<div id="d3">
<input type="button" value="生成a标签" id="btn" />
</div>
</body>
<script>
$(function(){
$('#btn').bind('click', function() {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2");
});

///bind方法对于动态添加的标签不好使,只对已经存在的静态标签好用
///用live方法才好用
$('li').live('click', function() {
alert($(this).text());///注意,用live还可以这样写,结果是正常的
alert("haha");
});

///通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)
$('#d1').live('click', function() {///对于静态和动态创建的标签都好使
alert($(this).text());///注意,用live还可以这样写,结果是正常的.这是非常重要的
alert("haha");
});
})
</script>

这种就是用jq的非常好用的既可以动态也可以静态绑定现在或者未来各种标签的live方法。而且它最神奇的地方是也能 打印自己。我靠,太牛了。以后就用它了。

暂时还没发现这个live方法有什么弱点啊!

新手一枚,欢迎大神指正各种错误!

以上这篇jquery 给动态生成的标签绑定事件的几种方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。