Js appended button not working

Question

On my website you can add cards to your collection. When you have clicked on the plus JS removes the plus button and inserts the minus button. The minus button is now visible but not working. I've read some articles about the new appended button not being clickable because the button didn't exist when the page was first loaded. Hence also when I reload the page the minus is working fine.

here's my code:

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>');
        }});
        //}
    });
});

I've checked with the Jquery manual: http://learn.jquery.com/events/event-delegation/ and aplied the there shown code but that just breaks my entire add/remove code:

// 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>');              
        }});
    });
//});

Who can help me out here? Thanks in advance.

If you are referring to the examples above? Then yes, that's how my code is at the moment. If you have any suggestions for improvement I would gladly hear them though. — ragoutje
– ragoutje, Commented Jul 6, 2015 at 20:57
programmers.stackexchange.com/questions/180501/… points out that templates are the best practise. Thanks for pointing that out. — ragoutje
– ragoutje, Commented Jul 7, 2015 at 18:15

jcuenod · Accepted Answer · 2015-07-06 19:31:22Z

4

The Problem

You can't bind event handlers to non-existent elements (which you are trying to do as you append delete button into the DOM).

As the DOM changes though, your handlers can also be lost when elements are removed.

The Solution

Bind your handlers to the document rather than specific selectors and filter for specific elements.

In other words, use this syntax for your handlers:

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

edited Jul 6, 2015 at 19:31

answered Jul 6, 2015 at 19:22

jcuenod

58.9k15 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ragoutje Over a year ago

Thanks! I was getting lost with that event stuff. Glad you pointed me in the right direction. It works like a charm now.

King Size · Accepted Answer · 2015-07-06 19:44:14Z

0

Though not the best way, but sometimes .live() (now deprecated) also does the trick. Here is how

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

answered Jul 6, 2015 at 19:44

King Size

3821 silver badge6 bronze badges

Collectives™ on Stack Overflow

Js appended button not working

2 Answers 2

The Problem

The Solution

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

The Problem

The Solution

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related