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

click event not firing on newly created list item

本文关键字：事件 列表 新创建 创建 单击      更新时间：2023-09-26

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

$('#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): http://jsfiddle.net/jasper/pgwdv/

部分文档链接:

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

你应该试试用。live代替。bind。

您可以使用live函数来保持click(和其他)处理程序对动态添加的内容处于活动状态。

代替

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

$('#SearchList li a').live("click", function () {
相关文章：