Question

我有两个列表，当你点击第二个列表时，第一个列表会删除第一个项目并添加到第二个列表但是当我点击新创建的列表项时，它不会触发为什么会这样。 jsFiddle demo

$('#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>

Answer 1

.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>');
});

注意：自jQuery 1.7起，.live()已弃用，因此最好使用.on()或.delegate()。

以上是上述解决方案的一个方面（使用jQuery 1.7）：http://jsfiddle.net/jasper/pgwdv/

一些文档链接：

.on()：http://api.jquery.com/on
.delegate()：http://api.jquery.com/delegate

Answer 2

你应该尝试使用.live而不是.bind。

Answer 3

您可以使用live功能使点击（和其他）处理程序处于活动状态，以便动态添加内容。

而不是

$('#SearchList li a').bind("click", function () {

使用

$('#SearchList li a').live("click", function () {

单击事件不会在新创建的列表项上触发

3 个答案: