javascript not working for newly added innerhtml through jquery

Question

Hi,

I have following HTML structure

<table>
<tr>
   <div id="getData">
   </div> 
</tr>
</table>

I am using jquery's html() method to add dynamic contents to div id "getData" as:

  $('#valueResult').html(data);
    var data ="
<table><tr><td><input type="checkbox" name="test[1]" onclick="doSometing()" /> Test</tr></tr></table> 
    <table><tr><td><input type="checkbox" name="test[2]" onclick="doSometing()" /> Test</tr></tr></table> "  

But the function doSometing() is never executed for any of the dynamically added checkboxes. why so ?

can anyone help me out ?

THX.

Answer 1

A cleaner jQuery solution for a problem like this is to use .live() or even better .delegate().

With this approach you should also give your input element an unique id and call:

$(document).ready(function(){
   $('#unique_input_id').live('click', function(){
      alert('clicked');
   });
});

Reference: .live(), .delegate()