Функция повторного связывания с клонированным элементом

Question

При написании функции «добавить в избранное» с использованием AJAX и некоторых других функций jQuery, таких как «bind» и «clone», возникла проблема. Сначала я объясню функциональность:

У меня есть две области содержимого:

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 () (или предпочтительно .on () для jQuery 1.7+) вместо .bind ().

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