Question

Excuse me for my English.
I’ve been trying to create a dynamic table which can edit sort of data in it after pressing a edit button.
Problem is after I create the column of checkboxs in the last column I just can’t execute click function on it in jQuery as i want to.

Creating function looks like this:

$("#meetingspanel td:last").each(function(event){  // Adding the checking column and showing the editing buttons       
       $("#btnDelete").fadeIn("slow"); 
       $("#btnRename").fadeIn("slow");
       $("<td style=border:0px><input type='checkbox' id='btncb'></td>").insertAfter($("td:nth-child(6)")); 
}); 

and to guess if I’m inside the function I used this:

$(":checkbox").click(function(event){
    alert("im here !");                 
});

and it just dont find when I click on the checkbox.
Help?

Answer 1

If I’ve understood your question correctly you will need to bind the click event in a way that allows it to fire on elements that are added to the DOM after the original binding, since you are inserting the checkboxes in your script.

If you’re using jQuery 1.7+, use on:

$(someAncestor).on("click", ":checkbox", function() {
    //Do stuff
});

someAncestor needs to be an element that is in the DOM when the above code executes that is an ancestor of the checkboxes you want to trigger the event. By the looks of your code, that’s likely to be the table element.

If you are using an older version of jQuery, look at the delegate method instead.

The reason this works is that DOM events bubble from the element on which they originate up through the DOM. If you bind an event handler to an ancestor, that handler gets executed when the event reaches that element. The on and delegate methods provide a way to filter these events so they are only triggered if they originated on a certain element.