Question

我已经非常彻底地研究了这个问题，但到目前为止我还没能解决它。我理解克隆（true，true）并使函数live（），但事件仍然失败。

以下是我的示例 - http://jsfiddle.net/vAfMf/2/ - 单击+号，然后尝试单击克隆元素以触发Jeditable。

以下是相关代码：

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+".&nbsp;&nbsp;");
        });
    }

});    

$(".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;
});

基本上我遇到与this poster here完全相同的问题 - 当我克隆Jeditable元素时，单击克隆会打开原始元素而不是克隆。虽然回答的问题是如何处理 - 重新绑定事件 - 但没有示例说明如何做到这一点，我感到茫然。我的例子很复杂，因为我有一些函数可以防止在Sortable完成时Jeditable触发。

如何解开原始元素的事件并重新绑定到克隆的任何帮助将不胜感激。

Answer 1

我在ExpertsExchange上发布了这个问题，得到了一个我从中学到很多东西的答案。对于那些像我一样刚接触JQuery的人，我正在分享它，希望它会像对我一样有启发性。

更新示例 - http://jsfiddle.net/vAfMf/4/

创建克隆元素，抓取所有绑定事件，然后在优雅的链中反弹到克隆。

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 + ".&nbsp;&nbsp;");
        });
    }

});

$(".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;
});

可切换+可排序+克隆

1 个答案: