Jeditable + Sortable + Cloning

Question

I've researched this question pretty thoroughly, but so far I haven't been able to solve it. I understand about clone(true,true) and making the functions live(), but events are still getting misfired.

Here is my example - http://jsfiddle.net/vAfMf/2/ -- click the + sign, and then try clicking on the cloned element to trigger Jeditable.

Here's the relevant code:

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};
$(".tracklist").sortable({
        placeholder: "track-highlight",
        helper: fixHelper,
        items: "tr",
        start: function(event, ui) {
        i=0;    
        notdragged = false;
        thisthing = $(this);
    },
     stop: function(event, ui) {
         notdragged = true;
     },
    revert: true,
    update: function(event, ui) {
        $(".tracklist .numcol").each(function(){
        $(this).html("");
        });    
        $(".tracklist .numcol").each(function(){
        i++
        $(this).html(i+".  ");
        });
    }

});    

$(".eachtrack").editable("save.php", {
      select : true,
      style   : "display: inline",
      width : "95%",
      cancel    : "<button class=\'cancelthistrack\'>Cancel<\/button>",
      submit    : "<button class=\'savethis\'>Save<\/button>",    
      event : "custom_event"
});

$(".tracklist tr td .eachtrack").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {
        $(this).trigger("custom_event");
        $(this).parent().css("height", "auto");
    }
});
$(".artistcol,.infocol,.titlecol").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {    
        $(this).children(".eachtrack").trigger("custom_event");

    }
});

$(".tracklist tr .btnwrap .addt_outer .addt_inner .addt .pngfix").click(function(){
    var thisrow = $(this).parent().parent().parent().parent().parent();
    var newrow = thisrow.clone(true,true);
    newrow.insertAfter(thisrow);
    return false;
});  

Basically I'm having the exact same problem as this poster here -- when I clone the Jeditable element, clicking on the clone opens the original element and not the clone. While the question is answered as to what to do -- rebinding events -- no example is shown as to how to do it, and I am at a loss. My example is complicated by the fact that I have a few functions in place to prevent the Jeditable triggering when the Sortable has completed.

Any help as to how to unbind the original element's events and rebind then to the clone would be greatly appreciated.

Answer 1

I posted this question on ExpertsExchange and got an answer that I learned a lot from. For those of you new to JQuery like me, I'm sharing it in hopes it will be as illuminating as it was for me.

Updated example - http://jsfiddle.net/vAfMf/4/

The cloned element is created, scratching all of the bound events, which are then rebound to the clone in an elegant chain.

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};
$(".tracklist").sortable({
    placeholder: "track-highlight",
    helper: fixHelper,
    items: "tr",
    start: function(event, ui) {
        notdragged = false;
    },
    stop: function(event, ui) {
        notdragged = true;
    },
    revert: true,
    update: function(event, ui) {
        $(".tracklist .numcol").each(function() {
            $(this).html("");
        });
        $(".tracklist .numcol").each(function(index) {
            $(this).html(index + 1 + ".  ");
        });
    }

});

$(".eachtrack").editable("save.php", {
    select: true,
    style: "display: inline",
    width: "95%",
    cancel: "<button class=\'cancelthistrack\'>Cancel<\/button>",
    submit: "<button class=\'savethis\'>Save<\/button>",
    event: "custom_event"
});

$(".tracklist tr td .eachtrack").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {
        $(this).trigger("custom_event");
        $(this).parent().css("height", "auto");
    }
});
$(".artistcol,.infocol,.titlecol").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {
        $(this).children(".eachtrack").trigger("custom_event");
    }
});

$(".tracklist tr .btnwrap .addt_outer .addt_inner .addt .pngfix").click(function() {
    var thisrow = $(this).parents("tr");
    var clone = thisrow.clone(false, false);
    clone.find(".eachtrack").editable("save.php", {
        select: true,
        style: "display: inline",
        width: "95%",
        cancel: "<button class=\'cancelthistrack\'>Cancel<\/button>",
        submit: "<button class=\'savethis\'>Save<\/button>",
        event: "custom_event"
    }).end().find(".tracklist tr td .eachtrack").live("mousedown", function() {
        notdragged = true;
    }).live("mouseup", function() {
        if (notdragged) {
            $(this).trigger("custom_event");
            $(this).parent().css("height", "auto");
        }
    }).end().find(".artistcol,.infocol,.titlecol").live("mousedown", function() {
        notdragged = true;
    }).live("mouseup", function() {
        if (notdragged) {
            $(this).children(".eachtrack").trigger("custom_event");
        }
    });
    thisrow.after(clone);
    $(".tracklist .numcol").each(function(index) {
        $(this).html(index + 1 + ".&nbsp;&nbsp;");
    });
    return false;
});