click事件不触发对新创建的列表项
问题描述:
我有两个列表,当你点击第二个名单上的第一个列表中删除的第一个项目,并添加到第二个列表,但是当我点击新创建的列表项它不”为什么呢? jsFiddle democlick事件不触发对新创建的列表项
$('#SearchList li a').bind("click", function() {
var $this = $(this).unwrap('<a href="#"></a>').remove().text();
var $that = $('#Search li:first').remove().text();
$('<li>' + $this + '</li>').insertBefore('#Search li:first')
$('#SearchList').append('<li><a href="#">' + $that + '</a></li>');
});
<ul id="Search">
<li>Electronics</li>
<li>Image</li>
</ul>
<ul id="SearchList">
<li><a href="#">Interests</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Clothing</a></li>
<li><a href="#">Pharmacy</a></li>
<li><a href="#">Home & Garden</a></li>
</ul>
答
.bind()
仅影响元素已经在DOM,要使用.delegate()
或.on()
(如果你正在使用jQuery 1.7+):
$('#SearchList').on("click", " li a", function() {
var $this = $(this).unwrap('<a href="#"></a>').remove().text();
var $that = $('#Search li:first').remove().text();
$('<li>' + $this + '</li>').insertBefore('#Search li:first')
$('#SearchList').append('<li><a href="#">' + $that + '</a></li>');
});
注:.live()
从jQuery 1.7开始折旧,所以最好使用.on()
或.delegate()
。
这里是(使用jQuery 1.7)上述溶液的的jsfiddle:http://jsfiddle.net/jasper/pgwdv/
有些文档链接:
-
.on()
:http://api.jquery.com/on -
.delegate()
:http://api.jquery.com/delegate
答
您应该尝试使用.live而不是.bind。
答
可以使用live功能,以保持点击(及其他)积极处理动态添加内容。
而不是
$('#SearchList li a').bind("click", function() {
使用
$('#SearchList li a').live("click", function() {
,这应该因为我相信.on()是当前的标准。 .live()就是我习惯的,而.live()取代.delegate(),我相信它会取代.bind()...不断发展的jquery。 –
@KaiQing'$( '#element_id')。住( '点击',函数(){...})'基本上是'$(文件).delegate( '#element_id', '点击',函数() {...});'委托给你指定一个与'document'不同的父对象的能力,所以没有太多的冒泡,直到'document'开始。 – Jasper
我的代码是如何将你写了什么我做了很简单的,感谢你这个工作 – ONYX