2012-07-10 35 views
0

我已經研究了這個問題很徹底,但到目前爲止我還沒有能夠解決它。我瞭解克隆(true,true)並使函數生活(),但事件仍然失靈。Jeditable + Sortable + Cloning

以下是我的示例 - 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; 
}); 

基本上我有完全相同的問題,因爲this poster here - 當我克隆Jeditable元素,點擊打開克隆原始元素,而不是克隆。雖然問題的答案是要做什麼 - 重新綁定事件 - 沒有例子顯示如何做到這一點,而我卻處於虧損狀態。我的例子很複雜,因爲我有一些功能可以在Sortable完成時防止Jeditable觸發。

任何有關如何解除原始元素的事件和重新綁定到克隆的幫助將不勝感激。

回答

0

我在ExpertExchange上發佈了這個問題,並得到了我從中學到很多東西的答案。對於像我這樣的新來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; 
});