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.

stackoverflow.com/questions/8752321/…

C3roe
– C3roe

2014-03-24 21:47:12 +00:00
Commented Mar 24, 2014 at 21:47 — C3roe
– C3roe, Commented Mar 24, 2014 at 21:47
Last line of code should say: $(course).empty();

Alec Moore
– Alec Moore

2014-03-24 21:50:22 +00:00
Commented Mar 24, 2014 at 21:50 — Alec Moore
– Alec Moore, Commented Mar 24, 2014 at 21:50
Yes it should, thanks for that.

kcc989
– kcc989

2014-03-24 23:43:30 +00:00
Commented Mar 24, 2014 at 23:43 — kcc989
– kcc989, Commented Mar 24, 2014 at 23:43

76484 · Accepted Answer · 2014-03-24 21:50:34Z

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, 2014 at 21:50

76484

9,0013 gold badges23 silver badges33 bronze badges

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

1 Comment

kcc989 Over a year ago

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.

Wilmer · Accepted Answer · 2014-03-24 22:16:33Z

1

Delegate the click event to closest container for better performance.

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

});

answered Mar 24, 2014 at 22:16

Wilmer

2,5091 gold badge14 silver badges8 bronze badges

Comments

Ananthan Unni · Accepted Answer · 2014-03-24 22:04:12Z

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);

Collectives™ on Stack Overflow

Adding Click Function to Dynamically Generated div jquery

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related