0

我已经非常彻底地研究了这个问题，但到目前为止我还没有能够解决它。我了解 clone(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+".  ");
        });
    }

});    

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

基本上我在这里遇到了与这张海报完全相同的问题——当我克隆 Jeditable 元素时，单击克隆会打开原始元素而不是克隆。虽然回答了关于做什么的问题——重新绑定事件——但没有显示如何做的例子，我不知所措。我的示例很复杂，因为我有一些功能可以防止在 Sortable 完成时触发 Jeditable。

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

4

1 回答 1

0

我在 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;
});
于 2012-07-11T03:25:21.693 回答