Click event does not persist for new dynamically created elements

Question

I have some code that attaches to the click event of a class:

$(".filter-link").click(function (e) {
    $("#filter").dialog("option", "position",
                    { my: "left top", at: "left bottom", of: e });
    $("#filter").dialog("open");
});

The element I use it on is dynamically recreated often:

function addTopLinks() {
    $('#calendar .fc-view thead th.fc-resourceName')
        .removeClass('top-calendar-cell');
    $('#calendar .fc-view thead th.fc-resourceName')
        .addClass('top-calendar-cell');
    $('#calendar .fc-view thead th.fc-resourceName')
        .html('<a class="filter-link" href="#">Filter Resources</a>');
};

Is there any way I can get the click to persist or will I be forced to reassign the click every time I recreate the element?

Thanks

It's a duplicate of MANY questions! The answer is using `.on()` correctly will work. Does not need writing out in full again — Popnoodles, Mar 05 '13 at 20:18
@Pointy they removed .live... That's an old answer. The question I posted is recent, .on has replaced .live and others. — Christian Stewart, Mar 05 '13 at 20:25
Ah OK - well hopefully somebody else will find a better one; there must be thousands of such questions out there :-) — Pointy, Mar 05 '13 at 20:26
some time `delegate` function is useful for your problem. see http://api.jquery.com/delegate/ — seyed, Mar 05 '13 at 20:47

score 2 · Accepted Answer · answered Mar 05 '13 at 20:23

2

Use .on():

$(document).on("click", ".filter-link", function (e) {
     $("#filter").dialog("option", "position",
            { my: "left top", at: "left bottom", of: e });
     $("#filter").dialog("open");
});

answered Mar 05 '13 at 20:23

Dom

38,906
12
52
81

1

Again, please don't answer duplicated questions -_- – Christian Stewart Mar 05 '13 at 20:24

Click event does not persist for new dynamically created elements

1 Answers1