Django中Ajax仅执行一次问题：删除收藏项后无法再次删除

嘿，这明显是动态元素的事件绑定踩坑了！我来给你捋清楚：

问题根源 #

第一次页面加载时，那些.substitut删除按钮已经在DOM里了，所以你直接给.substitut绑定click事件完全没问题。但你用$("#fav_list").load()刷新列表后，新生成的按钮是动态添加到DOM中的新元素，它们根本没被绑定过你写的点击事件，自然点了没反应。

解决办法：用事件委托 #

事件委托就是把事件绑定在一个从页面加载就存在的静态父元素上（比如你的#fav_list，它不会被刷新替换掉），让父元素去监听子元素的点击行为。这样不管子元素是一开始就有，还是后来动态生成的，事件都能被触发。

把你的AJAX代码改成这样就行：

// 绑定到静态父元素#fav_list，监听它下面的.substitut按钮点击
$("#fav_list").on('click', '.substitut', function(event) {
    event.preventDefault();
    var product = $(this).val();
    var url = '/register/delete/';
    $.ajax({
        url: url,
        type: "POST",
        data:{
            'product': product,
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
            if (data['success'])
                $("#fav_list").load(" #fav_list > *");
        }
    });
});

额外小建议 #

你现在把{% csrf_token %}塞在按钮标签里，虽然能拿到token，但这种写法有点别扭。建议把csrf token放在页面的<form>里，或者直接放在<body>开头的位置，这样DOM结构更规范，也不容易出问题。如果#fav_list本身也是动态生成的，那就把事件委托绑定到更上层的静态元素（比如$("body")），不过尽量绑定离目标元素最近的静态父元素，性能会更好。

内容的提问来源于stack exchange，提问作者Toto Briac