jQuery
New Wave Javascript

discuss » Binding events to newly added DOM elements

Posted: Wed Mar 8 11:45:05 EST 2006
From: Mike Alsup <malsup at gmail.com >

I'm seeing some odd behavior with event binding (IE6, IE7b2, FF1.5).
Given the following HTML:

<input id="bindTest" type="button" value="Bind" onclick="bindTest()" />

This method does not bind the click event for a newly created button:

function bindTest() {
var el = document.createElement("input");
$(el).set("id", "testButton").set("value", "Test
Button").set("type", "button");
$("#bindTest").after(el);

$(el).click(function() {
alert("button clicked");
});
}


but this method does:


function bindTest() {
var el = document.createElement("input");
$(el).set("id", "testButton").set("value", "Test
Button").set("type", "button");
$("#bindTest").after(el);

$("#testButton").click(function() {
alert("button clicked");
});
}