javascript - Js append 按钮不起作用

Question

在我的网站上，您可以将卡片添加到您的收藏中。当你点击加号时，JS 会删除加号按钮并插入减号按钮。减号按钮现在可见但不起作用。我读过一些关于新 append 按钮不可单击的文章，因为首次加载页面时该按钮不存在。因此，当我重新加载页面时，减号也工作正常。

这是我的代码:

HTML

echo '<li class="card addcards" id="card_' . $card["id"] . '">';
echo '<div class="status addtocol_btn addtocol_card_'.$card['id'].'" id="'.$card['id'].'"><span id="addtocol_'.$card['id'].'">'.$col_id.'</span>+</div>';
echo '</li>';

JS

// AJAX ADD CARD TO COLLECTION ON SEARCHPAGE
$(document).ready(function(){
    $(".addtocol_btn").click(function(){
        var card_id = $(this).attr('id');
        var col_id = document.getElementById('addtocol_'+card_id).innerHTML;
        $.ajax({
            url: ""+homelink+"/addtocol.php", 
            method: "POST",
            data:{'card_id':card_id, 'col_id':col_id},
            success: function(result){
                $('div[id="' + card_id + '"]').fadeOut();
             $('#card_'+card_id+'').append('<div class="status del_btn del_btn_card_'+card_id+'" id="'+card_id+'"><span id="removefromcol_'+card_id+'">'+col_id+'</span>-</div>');              
        }});
    });
});

// AJAX REMOVE CARD FROM COLLECTION ON SEARCHPAGE
$(document).ready(function(){
    $(".del_btn").click(function(){
        var card_id = $(this).attr('id');
        var col_id = document.getElementById('removefromcol_'+card_id).innerHTML;
        //if (confirm("Are you sure you want to remove this card from your collection?")) {
        $.ajax({
            url: ""+homelink+"/delete_card.php", 
            method: "POST",
            data:{'card_id':card_id, 'col_id':col_id},
            success: function(result){
             $('div[id="' + card_id + '"]').fadeOut();
             $('#card_'+card_id+'').append('<div class="status addtocol_btn addtocol_card_'+card_id+'" id="'+card_id+'"><span id="addtocol_'+card_id+'">'+col_id+'</span>+</div>');
        }});
        //}
    });
});

我已经检查过 Jquery 手册:http://learn.jquery.com/events/event-delegation/并应用了显示的代码，但这只会破坏我的整个添加/删除代码:

// AJAX ADD CARD TO COLLECTION ON SEARCHPAGE
//$(document).ready(function(){
    $(".card").on("click", "div", function( event ){
        event.preventDefault();
        var card_id = $(this).attr('id');
        var col_id = document.getElementById('addtocol_'+card_id).innerHTML;
        $.ajax({
            url: ""+homelink+"/addtocol.php", 
            method: "POST",
            data:{'card_id':card_id, 'col_id':col_id},
            success: function(result){
                $('div[id="' + card_id + '"]').fadeOut();
             $('#card_'+card_id+'').append('<div class="status del_btn del_btn_card_'+card_id+'" id="'+card_id+'"><span id="removefromcol_'+card_id+'">'+col_id+'</span>-</div>');              
        }});
    });
//});

谁能帮帮我？提前致谢。

Answer 1

问题

您无法将事件处理程序绑定(bind)到不存在的元素(您在将 delete 按钮 append 到 DOM 时尝试执行此操作)。

随着 DOM 的变化，当元素被移除时，您的处理程序也可能会丢失。

解决方案

将处理程序绑定(bind)到文档，而不是特定元素的特定选择器和过滤器。

换句话说，请为您的处理程序使用以下语法:

$(document).on("click", ".del_btn", function(){