Question

I am trying to write a dynamic form organized by table rows. Whenever the user clicks +, a new row of inputs is inserted. For simplicity, I’ve abridged the code:

<table id="test">
<tr>
    <td>
        <a class="addrow" href="javascript:void(0);">+</a>
    </td>
</tr>
</table>
<script>
$('.addrow').click(function () {
    $("#test tr:last").after('<tr><td><a class="addrow" href="javascript:void(0);">+</a></td></tr>');
});
</script>

My question is that only the first + would execute the script, and the when newly inserted +s are clicked, nothing happens. I suspect this is due to jquery not properly listening to events of newly added objects.

I tried adding $(document).ready(function () { }); with little luck.

Any help is appreciated.

Thanks in advance,

Answer 1

As you’re trying to react to events on elements not present in the DOM when the events were bound, you’ll need to use live() or delegate():

$('.addrow').live('click',function(){ /* click handler in here */ })

Or with delegate():

$('#table').delegate('.addrow','click',function(){ /* click handler in here */ });

References:

• live().
• delegate().