Question

美好的一天，

我一直在努力解决这段特殊代码。我已经阅读并尝试过JQuery和Stackoverflow的所有内容。主要问题是所有答案基本上（我能找到的）解决了已生成的HTML或静态页面。

我的删除代码（下面），注释和未注释，在使用静态html列表创建的页面上完美运行。

$(function () {
    //$(".deleteButton").click(function () {
    //    //$(this).closest("li").remove();
    //    jQuery(this).closest('li').fadeOut(400, function () { $(this).remove(); });
    //});
    $('.deleteButton').on({
        click: function () {
            jQuery(this).closest('li').fadeOut(400, function () { $(this).remove(); });
        }
    });
});

但是，只要我使用jQuery添加另一个“li”标签，删除按钮就会删除删除按钮中的文本，并在页面上留下“li”。

以下是我用来添加“li”的代码

function UpDatePage() {
    $.ajax({
        type: 'GET', url: "NewAdditions", contentType: "application/json", processData: false,
        success: function (data) {
            data = JSON.parse(data);
            for (var key in data) {
                $('.dlList').append(data[key]);
            }
            setTimeout(UpDatePage, 5000);
        }, dataType: "text"
    });
}

data [key]就是这样的

'<li class="ui-state-default dlItem" id={0}><table><tr><td style="width:50%"><input type="submit" value="{1}" id={2} onclick="Resume(this.id); return false"/> \
                                        <input type="submit" class="deleteButton" value="Delete" id=del-{2} onclick="Delete(this.id); return false" /> \
                                        <label>{3}</label></td> \
                                    <td style="width:10%; text-align:center" id=per-{2}>{4}</td> \
                                    <td style="width:5%; text-align:center" id=tfs-{2}>{5}</td> \
                                    <td style="width:6%; text-align:center" id=est-{2}>{6}</td> \
                                    <td style="width:5%; text-align:center">{7}</td> \
                                    <td style="width:10%; text-align:center">{8}</td></tr></table></li>'

我真的很困惑。我在这方面经历了多个链接，阅读jQuery文本并尝试了许多不同的代码排列。

希望有人可以帮助我，或指出我正确的方向。

背景：我使用python和cherrypy作为我的后端和mako用于模板化。我只是为了完整性而提到这一点，因为我非常怀疑他们正在创建我正在加载的页面已经存在的问题。

感谢名单

Answer 1

对于动态添加的html ..你必须以不同的方式处理事件委托

$(document).on('click','.deleteButton', function(){
});

document可以替换为外部容器选择器（div或其他），这是更明智的。

您也可以live，但在较新版本中已弃用

$('.deleteButton').live( 'click', function(){} );

Answer 2

基本上，问题是在添加元素之前添加了侦听器（单击）。因此，侦听器位于页面上的元素之前，而不是新附加的元素。因此，为了做你想做的事情，你必须重新分配这些听众，或者让他们“活着”。使用jQuery 1.9或更高版本：

$(document).on('click','.deleteButton', function(){ });

您可以在页面上不会更改的某个元素上添加侦听器，通常是文档。 jQuery 1.8或更低版本：

$('.deleteButton').live('click',function() { });

或者您可以在ajax成功回调函数中的附加<LI>上添加侦听器。但你必须确保并删除以前的听众，这样会有点复杂，这意味着你应该坚持“实时”的想法;）

希望这有帮助

Answer 3

侦听已冒泡到文档的事件的另一种方法是将单击处理程序绑定到li的父元素（我假设该类是ul .dLlist）：

$('.dlList').on('click','.deleteButton', function(){
  // work magic
});

这将允许您监听动态创建的内容，但避免等待事件一直到文档以触发处理程序的潜在混乱。

使用jQuery </li>删除以编程方式添加的<li>标记

3 个答案: