对克隆元素重新绑定函数

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