Question

I have this code.

The click function unbinds correctly but when i click on the button Edit 1 but it doesnt binds it back.

What have i been doing wrong ?
Please help me out

Answer 1

The main problem with your code is that you’re not rebinding your click handler to any particular function (and it doesn’t seem to say anywhere in the docs that it should be rebound to the previous handler if you call bind without a handler). So, you have to change your code like this:

var words = $("p:first").text().split(" ");
var text = words.join("</span> <span class='la'>");
$("p:first").html("<span class='la'>" + text + "</span>");
function spanclick(){
    $(this).html('<input class="mm" value="' + $(this).text() + '"/>');
    $(this).unbind("click");
}
$("span.la").click(spanclick);
$("span.la").unbind("click");
$("#hmm").delegate(".mm", "blur", function() {
    $(this).replaceWith("<span>" + $(this).val() + "</span>");
    $(this).bind("click");
    $("#get").html($("p").text());
});
$("#ed1").click(function() {
    $("#get").html("Editing 1");
    console.log('aaa');
    $("span.la").bind("click", spanclick);
});
$("#ed2").click(function() {
    $("#get").html("Editing 2");
});

But that’s not all. Apparently, something’s wrong with your CSS too, because the ed1 div is not catching click events. It was fixed when I removed all of the CSS.