Question

Here is my code, and I has been really frustrating on identifying the problem.

I tried to use

$('[isEditButton="true"]').on('click', function(){ codes })
or 
$('table tr td').on('click', '[isEditButton="true"]' , function(){ codes })

but both yield unexpected result, the edit button can only be clicked once.

I searched the Jquery doc and used the so-called Delegated events, however, still did not work, the edit button is clicked once, also the newly injected button cannot be automatically attached the click event.

My online code

http://jsfiddle.net/dennisboys/mAjmU/2/

Anyone can give me some pointers on what is going on. I am really crazy on this problem. Thanks in advance for any kind helpers! Really need you guys!

Answer 1

Your [isEditButton] elements are being dynamically appended, so you need to use on with a delegate handler, with that parent selector being available on DOM load. Your second example nearly fixed the problem, except the table tr td elements are being dynamically appended too. Try this:

$('#address_list').on('click', '[isEditButton="true"]', function() {
     // rest of your code...
});

Updated fiddle