jQuery悬停效果在Ajax调用后停止工作

Question

In my website there are some ajax calls that filter product results. There are some effects applied on these products, which stop working after ajax call completes.

At the bottom of the page's code, there's the following:

jQuery(function($) {

    jQuery('.category-products-grid').on('mouseenter', '.item', function() {
        ...
        ...
        ...
    }).on('mouseleave', '.item', function() {
        ...
        ...
        ...
    });

});

I've seen lots of similar posts about this issue, but none of the solutions suggested worked for me.

UPDATE Here is the ajax call code. i didn't posted before because I don't believe it provides helpful information. There are many functions called int it and the code is too big to post here. The function that matters here is replaceProductsBlock(), and so I'll post it here:

var request = new Ajax.Request(url,
{
method:'GET',
parameters:params,
onSuccess: function(transport){

    ....

    replaceProductsBlock(response);

    ....

},
onFailure: function(){
    ....
}
});




replaceProductsBlock: function(response, need_scroll){

    var content = response.product_list;

    if (typeof(this.gan_static_navigation_url) != 'undefined' && this.gan_static_navigation_url){
        if ($$('div.col-main').length > 0){
            var col_main = $$('div.col-main')[0];
            col_main.innerHTML += '<div class="category-view">' + content + '</div>';
        }
        return;
    }

    var replace_toolbar = false;

    if($$('div.category-products').length > 0){
        element = $$('div.category-products')[0];
        if (element.select('div.toolbar').length == 0){
            replace_toolbar = true;         
        }
    }else if($$('div.col-main p.note-msg').length > 0){
        element = $$('div.col-main p.note-msg')[0];
    }else{
        return;
    }

    if (content && content.toElement){
        content = content.toElement();
    }else if (!Object.isElement(content)) {

      content = Object.toHTML(content);
      var tempElement = document.createElement('div');
      content.evalScripts.bind(content).defer();
      content = content.stripScripts();
      tempElement.innerHTML = content;

      el =  this.getElementsByClassName('category-products', tempElement);

      if (el.length > 0){
         content = el[0];
      }else{
         el = this.getElementsByClassName('note-msg', tempElement);
         if (el.length > 0){
            content = el[0];
            if (this.gan_shop_by_area == 1){
                var shop_by_content = Object.toHTML(response.navigation);        
                shop_by_content.evalScripts.bind(shop_by_content).defer();
                shop_by_content = shop_by_content.stripScripts();                
                var tempElement = document.createElement('div');
                tempElement.innerHTML = shop_by_content;
                var shop_by = this.getElementsByClassName('block-layered-nav', tempElement);
                if (shop_by.length > 0)
                {
                    shop_by = shop_by[0];
                    shop_by.id = 'gan_tmp_shop_by';
                    new Insertion.Before(element, shop_by);
                }   
            }
         }else{
            return;
         }
      }
    }
    element.parentNode.replaceChild(content, element);

    if (replace_toolbar && $$('div.category-products').length > 0){
        this.ganReplaceToolbal(response.product_list);        
    }   

    if (typeof(need_scroll) != 'undefined' && need_scroll){
        if ($$('div.category-products').length > 0){
            var category_products = $$('div.category-products')[0];
            category_products.scrollTo();
        }
    }
},

Answer 1

After testing and failing again and again to solve this (used jquery live(), one(), livequery() and many many more..) I finally found a solution.

It's described in this article: Re-binding jQuery Events on AJAX Callbacks

The code I used looks something like this:

function initBinding(){
    jQuery('.category-products-grid > .item').hover(function() {
        ...
        ...
    }, function() {
        ...
        ...
    });
}



var request = new Ajax.Request(url,
{
    ...
    ...
    onSuccess: function(transport){
        initBinding();
    }
});