Question

在使用AJAX和某些其他jQuery函数（如“绑定”和“克隆”）编写“添加到收藏夹”功能时，出现了一个问题。我将首先解释一下这个功能：

我有两个内容领域：

产品列表 - 包含所有产品（产品标题，图片及“添加到收藏夹” -function）
收藏夹 - 包含所有已标记为收藏的产品（元素与产品具有相同的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(){
   ...
});

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

1 个答案: