Question

在我的网站上有一些过滤产品结果的ajax调用。对这些产品有一些影响，在ajax调用完成后停止工作。

在页面代码的底部，有以下内容：

jQuery(function($) {

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

});

我看过很多关于这个问题的类似帖子，但没有一个解决方案对我有用。

UPDATE 这是ajax调用代码。我之前没有发布，因为我不相信它提供了有用的信息。有很多函数叫做int it，代码太大了，不能在这里发布。这里重要的功能是replaceProductsBlock（），所以我将在这里发布：

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

经过测试并一次又一次地失败来解决这个问题（使用jquery live（），one（），livequery（）以及更多......）我终于找到了解决方案。

本文描述了： Re-binding jQuery Events on AJAX Callbacks

我使用的代码看起来像这样：

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



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

Jquery悬停效果在ajax调用后停止工作

1 个答案: