单击动态创建的AJAX jQuery仅适用于第一次

Question

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

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

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

我保留了一系列通知，以便我不会创建重复的元素。我使用.append()插入元素，然后使用.on()方法向<li>元素添加点击事件。

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

现在我的问题：

将通知标记为已读的第一个AJAX调用始终有效。但是之后的任何调用都没有，直到我刷新页面。我保留一个slug值来识别不同的通知。

我在刷新之前进行的每次调用都使用第一个slug值。我无法弄清楚为什么slug值与我标记为读取的第一个元素相关联。

此外，如果有人对如何处理此问题有更好的了解，请分享。

这是我的代码：

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)

removeNotification($(this), urlDelete);

但老实说我找到了

$( 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的方法，我认为它只是一个网址