问题

Question

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

这是我的代码：

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

问题

您无法将事件处理程序绑定到不存在的元素（在将document按钮附加到DOM中时尝试执行此操作）。

尽管DOM发生了变化，但删除元素后处理程序也会丢失。

解决方案

将处理程序绑定到$(document).on("click", ".del_btn", function(){而非特定选择器，并过滤特定元素。

换句话说，请将此语法用于处理程序：

{{1}}

Answer 2

虽然不是最好的方式，但有时.live（）（现已弃用）也可以解决问题。这是如何

$('.del_btn').live("click", function(){// your code here});

Js附加按钮不起作用

2 个答案:

问题

解决方案