Tamara
Tamara

Reputation: 145

jQuery click doesnt work on appended div's

I would like to append a div when clicking on an image. That works fine and it looks very good. But now I have to buttons to confirm if you want to delete an item or not. I'm trying to do a clickevent on the ' yes' button. Nothing seems to happen. How can I solve this problem?

$(".trashbinPage img").one('click', function(){
    $('#deletePage').closest('tr').after('<div class="deleteMessage"><p>Weet u het zeker?</p></div>');
    $('.deleteMessage').append('<div id="wrapButtons"><div class="trashYes">Ja</div><div class="trashNo">Nee</div></div>');
});

$(".trashYes").click(function(){
    alert('hoi');
});

Upvotes: 0

Views: 404

Answers (4)

John Keyes
John Keyes

Reputation: 5604

Register your .trashYes with on:

$('.deleteMessage').on('click', '.trashYes', function() {
    ...
});

Update

In versions of jQuery < 1.7 you should use the delegate function:

Update 2

Rory pointed out a problem in my code so I updated the answer.

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337714

The element is being appended after page load, which is when click() hooks up the event. Therefore you need to use on with a delegate to handle the event, like this:

$(".deleteMessage").on('click', '.trashYes', function(){
    alert('hoi');
});

Upvotes: 1

Alfa3eta
Alfa3eta

Reputation: 405

You must bind the event to the objects after you append them. Or use live() or delegate() instead of bind. There should be a lot of articles on Internet about difference between bind, live and delegate.

Upvotes: 1

MarcoK
MarcoK

Reputation: 6110

Typo? .one() should be .on() .

Upvotes: 0

Related Questions