单击动态创建的ajaxjquery只在第一时间有效

Question

我正在尝试创建一个下拉菜单，使用jQuery动态插入。我插入的对象是通知，所以我希望能够在单击它们时将它们标记为已读。在

我有一个AJAX调用，它每秒从Django后端刷新通知。在

刷新后，我将通知插入菜单。在

我保留一个通知数组，这样就不会创建重复的元素。我通过使用.append()插入元素，然后使用.on()方法向<li>元素添加一个click事件。在

一旦click事件启动，我调用一个函数来.remove()元素，并对Django进行AJAX调用，将通知标记为read。在

现在我的问题是：

第一个将通知标记为read的AJAX调用始终有效。但在那之后的任何呼叫都要等到我刷新页面后才能进行。我保留一个slug值来标识不同的通知。在

我在刷新之前的每次调用都使用第一个slug值。我不明白为什么slug值与我标记为read的第一个元素绑定。

另外，如果有人对如何处理这个问题有更好的想法，请分享。在

我的代码是：

var seen = [];

function removeNotification(elem, urlDelete) {
    elem.remove();
    console.log("element removed");

    $.ajax({
        url: urlDelete,
        type: 'get', 
        success: function(data) {
            console.log("marked as read");
        },
        failure: function(data) { 
            console.log('failure to mark as read');
        }
    }); 
}

function insertNotifications(data) {
    for (var i = 0; i < data.unread_list.length; i++) {
        var slug = data.unread_list[i].slug
        var urlDelete = data.unread_list[i].url_delete;
        if (seen.indexOf(slug) === -1) {

            var elem = $('#live-notify-list').append("<li id='notification" +
                i + "' > " + data.unread_list[i].description + " </li>");

            var parent = $('#notification' + i).wrap("<a href='#'></a>").parent();

            seen.push(slug);

            $( document ).ready(function() {
                    $( document ).on("click", "#notification" + i, function() {
                    console.log("onclick " + slug);
                    removeNotification(parent[0], urlDelete);
                });
            });
        }
    }
}

function refreshNotifications() {
    $.ajax({
        url: "{% url 'notifications:live_unread_notification_list' %}",
        type: 'get',
        success: function(data) {
            console.log("success");
            insertNotifications(data);
        },
        failure: function(data) { 
            console.log('failure');
        }
    }); 
}
setInterval(refreshNotifications, 1000);

Answer 1

我真的不知道你说parent[0]是什么意思

removeNotification(parent[0], urlDelete);

我想你可以试试$(this)

^{pr2}$

但说实话我发现

$( document ).ready(function() {
   $( document ).on("click", "#notification" + i, function() {
      console.log("onclick " + slug);
      removeNotification(parent[0], urlDelete);
   });
});

在循环中。。它的坏处是把它放在函数之外然后像这样使用它

$( document ).ready(function() {
       setInterval(refreshNotifications, 1000);
       $( document ).on("click", "[id^='notification']", function() {
          console.log("onclick " + slug);
          removeNotification($(this), urlDelete);
       });
 });

试着找到一种方法来传递一个urlDelete，我认为它只是一个url