Adding Click Function to Dynamically Generated div jquery

Question

I am fairly new to JQuery and I am having issues with binding functions to a dynamically generated div.

Essentially the user clicks a button which adds a couple divs to a container and also changes the background color of that container. I want them to have the option to remove what they added by clicking on one of the divs.

I have this function that I thought should do that:

$('.course-delete').click(function() {
    var course = $(this).parent();
    alert("hello");
    $(course).css('background', "#fff");
    $(course).empty();  
});

But for whatever reason nothing happens when I click the div. If anyone knows what is going on I would appreciate it.

http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht — CBroe, Mar 24 '14 at 21:47

score 2 · Accepted Answer · answered Mar 24 '14 at 21:50

2

By the sounds of it, your .course-delete elements don't exist when jQuery attempts to bind the handler - because your divs are created dynamically later. If this is the issue, then event delegation will be your saviour: https://learn.jquery.com/events/event-delegation/

$(document).on('click', '.course-delete', function () {
    /* do delete stuff here */
});

answered Mar 24 '14 at 21:50

76484

8,498
3
19
30

Thank you, this was very helpful. I did some digging in the JQuery docs but never stumbled upon this. This was exactly what I needed. – kcc989 Mar 24 '14 at 23:51

score 1 · Answer 2 · answered Mar 24 '14 at 22:16

1

Delegate the click event to closest container for better performance.

$("#divcontainer").on("click", ".course-delete", function() {

});

answered Mar 24 '14 at 22:16

Wilmer

2,511
1
14
8

score 0 · Answer 3 · answered Mar 24 '14 at 22:04

You could also..

//Create your new DIV
var newDiv=$('<div />',{
html:'This is sample HTML', // add your HTML
click:function(){
// your click event handler
}
});

and then add to your document like...

newDiv.appendTo('body');//or any selector you want to append to. Use prependTo if you want it as the first element of the container.

So when combined, you can write like this...

$('<div />',{// you can set attributes and other stuff here
    html:'This is sample HTML', // add your HTML
    click:function(){
    // your click event handler
    }
 }).appendTo(container);

Adding Click Function to Dynamically Generated div jquery

3 Answers3