将功能重新绑定到克隆元素

Question

在使用AJAX和某些其他jQuery函数(如"绑定"和"克隆")编写"添加到收藏夹"功能时,出现了一个问题.我将首先解释一下这个功能:

我有两个内容领域:

1. 产品列表 - 包含所有产品(产品标题,图片及其"添加到收藏夹"功能)
2. 收藏夹 - 包含已标记为收藏夹的所有产品(元素与产品具有相同的html结构)

将产品添加到收藏夹时,我会以编程方式将"添加到收藏夹"按钮更改为"从收藏夹中删除"按钮.另外,我将整个产品(包括"从收藏夹中移除"按钮)克隆到"收藏夹"区域.

现在,如果我切换到"收藏夹"-area并尝试删除喜欢的产品,它就不起作用.如果我然后刷新页面,删除工作完美..

我认为,这与刷新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()(或者最好是.on()用于jQuery 1.7+)而不是.bind().

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