dynamically added hyperlink in table click

Question

I am adding dynamically hyperlink and want to execute click event as below when ever user clicked on it but it is not firing up.

 <table id="assinged_areas" class="table table-bordered table-condensed table-condensed">
            <tbody></tbody>
        </table>

When user selected some option in DropDown then it goes and get areas from server then ajax get calls this function by passing data to this function

 function updateAssignedAreas(data) {

            debugger;
            var areas = data.split(',');
            $.each(areas, function (i, item) {
                $('#assinged_areas > tbody:last').append('<tr><td>' + item + '</td><td>' + '<a class=\'btn btn-danger\'><i class=\'fa fa-minus-circle\'></i></a>'
                    + '</td></tr>');
            });
        }

This is the function when user click on unassign must call but not firing at all

  $('.btn-danger').click(function (parameters) {
            debugger;
        });

Anoop Joshi P · Accepted Answer · 2014-07-02T10:36:02.343

1

Use event delegation for dynamic elements

$("#assinged_areas").on("click", '.btn-danger', function (parameters) {
    var row=$(this).closest("tr");
    alert($(this).closest("tr").find("td").eq(0).html()); //will get the inner text of first td
});

Event delegation allows you to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

edited Jul 02 '14 at 10:36

answered Jul 02 '14 at 09:30

Anoop Joshi P

25,373
8
32
53

1

as Anoop says, http://learn.jquery.com/events/event-delegation/ – Rob Schmuecker Jul 02 '14 at 09:31
Hi, Thanks for the answer, How can I get the row details of the clicked button – ineffable p Jul 02 '14 at 10:29
@ineffablep can you share the final rendered html? – Anoop Joshi P Jul 02 '14 at 10:34
@ineffablep see the edits – Anoop Joshi P Jul 02 '14 at 10:36

dynamically added hyperlink in table click

1 Answers1