Click event is not working after replacing the elements

Question

I got this code:

$(function () {
    $('#or').click(function () {
        $("#m0").html('<input type="text" class="highlight" name="test1"/>');
    });
});

Its working fine and it does replace the:

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

with the text input, the problem appear when I click on #or click somewhere else (then it is replacing with original content), and when I add the original content back, it doesn't work.

This is the code I used to replace the text input on replaced #m0 with the original one:

$(function () {
    $('.m').click(function () {
        $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>');
    });
});

So, to be sure you did understand me:

The original content is:

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

then I use this to replace the above with text input:

$(function () {
    $('#or').click(function () {
        $("#m0").html('<input type="text" class="highlight" name="test1"/>');
    });
});

and then... I use this code to restore back the original content:

$(function () {
    $('.m').click(function () {
        $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>');
    });
});

And finally when:

<input type="text" class="highlight" name="test1"/>

is replaced with:

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

The click event doesnt work anymore.

Answer 1

Use the live method, which binds events even after DOM updates http://api.jquery.com/live/

$(function () {
    $('#or').live('click', function () {
        $("#m0").html('<input type="text" class="highlight" name="test1"/>');
    });
});

Answer 2

Update This answer is was outdated. Check JQuery.on, which combines the best of both worlds. It allows you to bind an event to an element, while the event itself is targeted to elements inside that element. It's like live, only you can choose a specific target element, (for instance a container element in which Ajaxed content is added/changed). on replaces live, bind and delegate.

Original answer (for JQuery before 1.7): JQuery's live method, as suggested by the answers, is the easy way out, but it has some disadvantages. It is slower, because each modification to the DOM causes all 'live' selector to be re-evaluated.

See also this answer for some disadvantages: Performance difference between jQuery's .live('click', fn) and .click(fn)

Therefore, I rather use bind or click to explicitly bind the click event to the newly created elements. It is a little more work (though neglectable if you structure your code properly) and it gives you better performance and more control.

Answer 3

You'll have to make the event handlers live:

$('#or').live("click", function() {
    //Event hander code
});

From the jQuery docs for live:

Attach a handler to the event for all elements which match the current selector, now and in the future.

The problem is that the event handler is bound to the element that exists in the DOM at the time of binding. When that element is removed, the event handler is removed with it. When you add a new element (it's a new element, even if it does look the same as the old one) it doesn't have the event handler bound to it. That's where live comes in handy. It monitors the DOM for the addition of elements that match the selector, and applies the event handler to any that do.

Answer 4

Replace .click(...) with .live("click", ...)