Question

我目前正在尝试使用JQuery和Ajax构建过滤搜索功能。过滤器可以在以下位置看到：

http://www.danfarrellwright.com/screwsline/front_end/product.php?product_id=104

当页面加载悬停在表格上时，您会看到当前单元格改变颜色。现在使用长度或规格过滤器来减少结果，当ajax完成时，表格悬停功能不再起作用。帮助将不胜感激！

这是改变表格单元格颜色的函数：

$('table')
    .delegate('.price_cell', 'mouseenter', function() {
        if ($(this).index() > 0) {
            $(this).css('background-color','#cce6ff');
            $('td:lt(1)', $(this).parents('tr')).css({'background-color':'#0096E1','color':'#ffffff'});
        }
    })
    .delegate('.price_cell', 'mouseleave', function() {
        if ($(this).index() > 0) {
            $(this).css('background-color','#ffffff');
            $('td:lt(1)', $(this).parents('tr')).css({'background-color':'#ffffff','color':'#002436'});
        }
        });

这是滑块和Ajax的功能：

$( "#lengthSlider" ).slider({
    range: true,
    min: lengthMin,
    max: lengthMax,
    step: 5,
    values: [ lengthMin, lengthMax ],
        slide: function( mouseleave, ui ) {
        $(this).siblings('input[class^="low"]').val(ui.values[ 0 ]);
        $(this).siblings('input[class^="high"]').val(ui.values[ 1 ]);
        $('#tableHolder').html('<img src="' + base + 'images/ajax-loader.gif" alt="ajax-loader" />&nbsp;Screwsline powered by Webformed');
        $('#tableHolder').load(document.URL + ' #tableHolder', { 
                    'lengthMinFil':ui.values[ 0 ], 
                    'lengthMaxFil':ui.values[ 1 ]
                });
    }
});

Answer 1

你的委托是在$（'tableHolder'）里面的$（'table'），这意味着你在执行ajax调用时会被替换掉，所以你就失去了委托。

Answer 2

您加载新表。您需要将函数重新绑定到此新表。因为它与页面加载时绑定的表不同（当调用delegate()时）。

OR

您可以使用jQuery的live()函数。

Ajax调用后，JavaScript停止工作

2 个答案: