0

再会，

我一直在为这段特殊的代码苦苦挣扎。我从 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作为模板。我只是为了完整起见而提到这一点，因为我非常怀疑他们正在创建我在页面已经加载时遇到的问题。

谢谢

4

3 回答 3

1

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

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

document可以用更可取的外部容器选择器（div 或其他东西）替换。

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

$('.deleteButton').live( 'click', function(){} );
于 2013-07-31T13:50:07.340 回答
0

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

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

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

于 2013-07-31T13:59:04.707 回答
0

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

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

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

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

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

希望这可以帮助

于 2013-07-31T13:54:03.953 回答