Js附加按钮不起作用

Question

在我的网站上，您可以将卡片添加到您的 collection。当您单击加号时，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/ 并应用了那里显示的代码，但这只是破坏了我的整个 add/remove 代码：

// 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

问题

您不能将事件处理程序绑定到不存在的元素（您在将 delete 按钮附加到 DOM 中时试图这样做）。

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

解决方案

将您的处理程序绑定到 document 而不是特定的选择器和特定元素的过滤器。

换句话说，对您的处理程序使用此语法：

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

Answer 2

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

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

Js附加按钮不起作用

Js appended button not working

javascript

jquery

append

button

event-handling

问题

解决方案