JavaScript stops workiong after an Ajax call

Question

I'm currently trying to build a filter search function using JQuery and Ajax. The filter can be seen at:

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

When the page loads hover over the table and you'll see that the current cell changes color. Now use with either the length or gauge filter to reduce the results, when the ajax is completed the table hover function no longer works. Help would be appreciated!

Here's the function that changes the table cell colors:

$('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'});
        }
        });

And here's the function for the slider and 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

Your delegate is on $('table') which lies inside of the $('#tableHolder') meaning that it is replaced when you do the ajax call, so you lose you delegate.

Answer 2

You load in a new table. You will need to rebind your function to this new table. Since it is a different table than the one which was bound at page load (when delegate() was called).

OR

You could use jQuery's live() function.