Question

Say I have a table:

<table id="myTable">
    <tbody>
        <tr>
            <td>
                <a class="removeLink" >Remove</a>
            </td>
        </tr>
        <tr>
            <td>
                <a class="removeLink" >Remove</a>
            </td>
        </tr>
    </tbody>
</table>
<a id="addLink">Add</a>

So the aim of the game here is that when a remove link is clicked the associated row will dissapear.

So I have some javascript:

<script type="text/javascript">
    $(document).ready(function () {

        $('.removeLink').click(function () {

            $(this).closest('tr').hide('slow');

        });

        $('#addLink').click(function () {

            $('#myTable').append('<tr><td><a class="removeLink" >Remove</a></td></tr>');

        });

    });
</script>

So I have the dissappearing part working with this.

However the add link adds a row to the table.

Now when I click the remove on a row that has been added it doesn’t dissapear. Makes sense as it hasn’t had its click
event set up.

How to code this so that links that are added will have their removeLinks hooked up to hide?

Also is this a strange way to even add the row? Is there a better way?

Answer 1

You can use on():

$('#myTable').on('click', 'a.removeLink', function(e){
    $(this).closest('tr').remove();
});

on() essentially binds the named event(s) to the specified element (#myTable), and, on ‘hearing’ that, or those, event(s) inspects the target to see if it matches the supplied selector (the second of the parameters passed to the on() method. If it does, the anonymous, third parameter, function is executed.

It seems better to bind the event-handling to the element closest to the elements affected by the event that exists in the DOM at the point of event-handling/binding. In this case that would be the tbody, which would result in the following (only-slightly) modified code:

$('#myTable tbody').on('click', 'a.removeLink', function(e){
    $(this).closest('tr').remove();
}

Other alternatives are delegate() (though this has been superseded by on() from jQuery 1.7):

$('#myTable').delegate('a.removeLink', 'click', function(e){
    $(this).closest('tr').remove();
}

Or live(), though this is deprecated as of jQuery 1.7, and, even where live() is available, delegate() is recommended in preference. That said:

$('#myTable').live('click', 'a.removeLink', function(e){
    $(this).closest('tr').remove();
}

References:

• delegate().
• live().
• on().