Why click event not work in this code (JSFiddle: /):

var holder = $("<div></div>");

$(document.body).append(holder);

var btn = $("<button>Click Here</button>");

btn.click(function(){alert('clicked');});

holder.append(btn);
holder.html("");
holder.append(btn);

you can replace this line:

btn.click(function(){alert('clicked');});

with (Not work again):

btn.bind("click",function(){alert('clicked');});

and if i dont use jquery and set javascript event like this, it works fine!!

btn[0].onclick=function(){alert('clicked');}

Why click event don`t work when i re-append element (button) and how can i fix it?

Why click event not work in this code (JSFiddle: http://jsfiddle/3WeP5/):

var holder = $("<div></div>");

$(document.body).append(holder);

var btn = $("<button>Click Here</button>");

btn.click(function(){alert('clicked');});

holder.append(btn);
holder.html("");
holder.append(btn);

you can replace this line:

btn.click(function(){alert('clicked');});

with (Not work again):

btn.bind("click",function(){alert('clicked');});

and if i dont use jquery and set javascript event like this, it works fine!!

btn[0].onclick=function(){alert('clicked');}

Why click event don`t work when i re-append element (button) and how can i fix it?

• javascript
• jquery

Share Follow asked Jul 13, 2013 at 10:59 Mehdi YeganehMehdi Yeganeh 2,14122 gold badges2525 silver badges4343 bronze badges 2

• 1 use btn.on('click', function(){}); – Spirals Whirls Commented Jul 13, 2013 at 11:01
• 1 @ Spirals Whirls Check it jsfiddle/3WeP5/2 not work.. – Mehdi Yeganeh Commented Jul 13, 2013 at 11:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Look the documentation of .html():

When .html() is used to set an element's content, any content that was in that element is pletely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.

holder.html(""); is removing the handler of the button. If you want to keep it you can use clone as:

holder.append(btn.clone(true));
holder.html("");
holder.append(btn.clone(true));

Try on jQuery ON

// You are better off just adding a id to the button

var btn = $("<button id=\"someButton\">Click Here</button>");

$(document).on('click', '#someButton', function(){
   alert('clicked');
});

What this does is add's a click listener to the document and when someone click's the document it checks to see if the event.target === btn

Here is a demo

The reason that the event's don't work is because jQuery.html(); removes the event listeners it is confirmed here https://github./jquery/jquery/blob/master/src/manipulation.js#L231

JSFiddle

Use event delegation:

$(document.body).on('click', btn, function() {
    alert('clicked!');
});

Your code doesnot work because when the script if first loaded it binds the function to that particular element but when you add another one the script doesnot run again and so the appended element doesnot get its event binded. When we add event delegation, we target document.body and so when the script gets loaded event gets binded to that element on the body.

Demo.

For earlier versions of jQuery you may use this one:

$(document.body).delegate(btn, 'click', function() {
    alert('clicked!');
});