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"/>');
    });
});