Question

While writing an “add to favorites”-function using AJAX and certain other jQuery functions like “bind” and “clone” a problem appeared. I will first explain the functionality:

I have two content areas:

1. Product list – containing all products (Product title, picture and it’s “add to favorites”-function)
2. Favorites – containing all products which have been marked as favorites (element has the same html-structure as product)

When adding a product to favorites I programmatically change the “add to favorites”-button to a “remove from favorites”-button. Additionally, I clone the entire product (including the “remove from favorites”-button) to the “Favorites”-area.

Now, if I switch to the “Favorites”-area and try to remove the favored product, it doesnt’t work. If I then refresh the page, the removing works perfectly..

I my opinion, it’s got to do with refreshing the DOM structure or re-binding the function or something like this..
I’m very happy for any kind of help or explanations on this problem.

Here’s my code (script is placed at the end of the page):

// 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] )

Normally, any event handlers bound to the original element are not copied to the clone. The optional withDataAndEvents parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.4, all element data (attached by the .data() method) is also copied to the new copy.

As of jQuery 1.5, withDataAndEvents can be optionally enhanced with deepWithDataAndEvents to copy the events and data for all children of the cloned element.

For instance

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

might be what you need.

Otherwise, use .live() (or preferably .on() for jQuery 1.7+) instead of .bind().

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