對克隆元素重新綁定函數

Question

使用AJAX和其他某些jQuery函數（如「綁定」和「克隆」）編寫「添加到收藏夾」功能時，出現了一個問題。我先解釋一下功能：

我有兩個內容領域：

1. 產品列表 - 包含所有產品（產品名稱，圖片和它的「添加到收藏夾」 - 函數）
2. 收藏夾 - 包含所有已被標記爲收藏的產品（元素與產品具有相同的html結構）

將產品添加到收藏夾時，以編程方式將「添加到收藏夾」按鈕更改爲「從收藏夾中刪除」按鈕。此外，我將整個產品（包括「從收藏夾中刪除」按鈕）克隆到「收藏夾」區域。

現在，如果我切換到「收藏夾」區域並嘗試刪除偏愛的產品，則不起作用。如果我然後刷新頁面，刪除工作完美..

我認爲，這是有關刷新DOM結構或重新綁定功能或類似的東西.. 我很高興任何對這個問題的一些幫助或解釋。

這裏是我的代碼（腳本被放置在頁面的結尾）：

// ACTION: Favorites 
$JQuery('.katoverview_media').find('.prod_action_favorit').bind("click", function(){ 
    //Split data and set variables 
    var type = $JQuery(this).attr("rel").split('%')['0']; 
    var objid = $JQuery(this).attr("rel").split('%')['1']; 
    var favs = parseInt($JQuery('#count_favoriten').html()); 
    if($JQuery(this).hasClass("active")){ 
     $JQuery(this).removeClass("active"); 
     var action  = 'delete'; 
     var favs_new = favs-1; 
     $JQuery.each($JQuery('.katoverview_media_fav').find('.prod_action_favorit'), function() { 
      var checkObjid = $JQuery(this).attr("rel").split('%')['1']; 
      if(checkObjid == objid){ 
       if($JQuery(this).hasClass("active")){ 
        $JQuery(this).parent().parent().parent().remove(); 
       } 
      } 
     }); 
    } else { 
     $JQuery(this).addClass("active"); 
     var action  = 'add'; 
     var favs_new = favs+1; 
     $JQuery(this).parent().parent().parent().clone().appendTo('.katoverview_media_fav'); 
    } 
    var pars = 'type='+type+'&objid='+objid+'&action='+action; 
    $JQuery.ajax({url: "ajax/fav.php?"+pars}); 
    $JQuery('#count_favoriten').html(favs_new).css({color: 'red'}).delay('500').animate({color: '#333'}, 1000); 
}) 

$JQuery('.katoverview_media_fav').find('.prod_action_favorit').bind("click", function(){ 
    //Split data and set variables 
    var type = $JQuery(this).attr("rel").split('%')['0']; 
    var objid = $JQuery(this).attr("rel").split('%')['1']; 
    var favs = parseInt($JQuery('#count_favoriten').html()); 
    if($JQuery(this).hasClass("active")){ 
     $JQuery(this).parent().parent().parent().remove(); 
     var action  = 'delete'; 
     var favs_new = favs-1; 
    } 
    var pars = 'type='+type+'&objid='+objid+'&action='+action; 
    $JQuery.ajax({url: "ajax/fav.php?"+pars}); 
    $JQuery('#count_favoriten').html(favs_new).css({color: 'red'}).delay('500').animate({color: '#333'}, 1000); 
    $JQuery.each($JQuery('.katoverview_media').find('.prod_action_favorit'), function() { 
     var checkObjid = $JQuery(this).attr("rel").split('%')['1']; 
     if(checkObjid == objid){ 
      if($JQuery(this).hasClass("active")){ 
       $JQuery(this).removeClass("active"); 
      } 
     } 
    }); 
}) 

Answer 1

.clone（[withDataAndEvents] [，deepWithDataAndEvents]）

通常情況下，任何事件處理程序綁定到原始元素不會複製到克隆。可選的參數withDataAndEvents參數允許我們改變這種行爲，並且改爲複製所有事件處理程序，並綁定到元素的新副本。從jQuery 1.4開始，所有元素數據（由.data（）方法附加）也被複制到新副本中。

在jQuery 1.5，withDataAndEvents可以與deepWithDataAndEvents任選地被加強，以這些事件和數據複製的克隆的元件的所有子。

例如

$JQuery(this) 
    .parent() 
    .parent() 
    .parent() 
    .clone(true, true) /* with withDataAndEvents and deepWithDataAndEvents */ 
    .appendTo('.katoverview_media_fav'); 

可能是你所需要的。

否則，請使用.live()（或最好是用於jQuery 1.7+的.on()）而不是.bind（）。

$('.katoverview_media_fav .prod_action_favorit').live("click", function(){ 
    ... 
});