Question

在第一个片段中，我将div元素添加到其他元素中。添加div，显示项目图像。

第二个代码段从项目div中删除一个项目。也没问题。

/* add item */
$('.add-to-session').on('click', function() {
    var this_obj = $(this);
    var data_cl_item = $(this).data('cl-item');
    var data = {
        'action': 'add_to_session',
        'item': data_cl_item
    }
    $.post(ajaxurl, data, function(response) {
        if(response != "") {
            $('.no-items').hide();              
            $('.session-items').prepend(response);
        }
    });
});

/* remove item */
$('.session-item-image').on('click', function() {
    var this_obj = $(this);
    var item_id = $(this_obj).data('delete');
    var data = {
        'action': 'delete_from_session',
        'item_id': item_id
    }
    $.post(ajaxurl, data, function(response) {          
        if(response == "200") {             
            $('.cl-session-item-'+item_id).remove();
        }
    });
});

问题：我无法删除FRESH ADDED项目而无需重新加载页面。

有人可以帮忙吗？

Answer 1

此处仅适用于动态元素.click()或$(".Element").on("click",function(){})无效。

使用

 $(document).on('click', '.YourElementClassWhichWillBeClicked',                
 function() {
  //Your code
 });

为什么？因为，当你编写它时，有可能在首先渲染DOM，HTML时元素不存在。

你有很多元素可以在某些事件上呈现。那些是动态创建的HTML元素，而不是在加载DOM时。

现在看，每次单击Anywhere时，您首先单击document，右，因此委托通过在Runtime找到它来动态生成并将事件附加到该元素。因此，委托是根据您的问题解决动态元素的方法。

问题是您将on()事件附加到动态添加的元素。你应该在你的情况下使用委托

删除前置标记

1 个答案: