0

我有一些从 phpMyAdmin 数据库中提取的简单数据。我用这些数据填充 div，然后必须X从页面中删除该项目。删除没有问题，但它不是实时事件。我必须重新加载页面才能删除元素。为什么会这样？我已经指定了单击删除项目on时要发生的事件，但没有任何反应。X

html

<div id="listInserts">
    dog<a class="del" rel="1" href="#">X</a>
    cat<a class="del" rel="2" href="#">X</a>
    bird<a class="del" rel="3" href="#">X</a>
</div>

JS

$(function() {

    $.get('dashboard/xhrGetListings', function(o) {
     //Pulling results from database
        for (var i = 0; i < o.length; i++)
        {
            $('#listInserts').append('<div>' + o[i].text + '<a class="del" rel="'+o[i].id+'" href="#">X</a></div>');
        }
     //Perform live delete
        $('#listInserts').on('click', 'a.del', function(e) {
            var delItem = $(this);
            var id = $(this).attr('rel');

            $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) {
                delItem.parent().remove();
            }, 'json');

            return false;
        });

    }, 'json');

});
4

2 回答 2

0

我制作了您的代码的本地副本。Als IgorDymov 指出该行delItem.parent().remove();试图删除链接的父节点。如果您将代码更改为

<div id="listInserts">
<ul>
        <li>dog      <a class="del" rel="1" href="#">X</a></li>
        <li>cat      <a class="del" rel="2" href="#">X</a></li>
        <li> bird      <a class="del" rel="3" href="#">X</a></li>
    </ul>
</div>

这样你就删除了 li，它是你的链接的父节点。

你确定dashboard/xhrDeleteListing可以解决路径吗？单击链接后，chrome 开发工具控制台会显示什么？

可能还有另一个问题。您确定删除项目的事件处理程序已绑定吗？

于 2013-07-05T06:21:52.050 回答
0

我喜欢使用来自 jquery 的委托。您只需将其设置在页面顶部，就像事件侦听器一样。

$('body').delegate('.del', 'click', function(e) { 
        var delItem = $(this);
        var id = $(this).attr('rel');

        $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) {
            delItem.parent().remove();
        }, 'json');

        return false;
});
于 2013-07-05T05:26:50.337 回答