Issue with jQuery when fetching data using .load()

Question

I have a table that when a row is clicked it sends the first 6 characters of that row (an ID) to a PHP page and loads the subsequent data into a div further down the page. The issue it seems is that once I click a row to load the div, The majority of the jQuery events stop working (.hover, .sortElements) these are attached to the original table. Is there anyone that would know a 'fix' or work around for this issue or is there something I am just missing.

<SCRIPT type='text/javascript'>
$(document).ready(function(){

$(".panel").hide();
$(".itemjobbutton").click(function(){
    $(".panel").slideToggle("200");
    return false;
});
var inverse = false;
$("#jobTable th").click(function(){
            var header = $(this),
                index = header.index();

            header
                .closest('table')
                .find('td')
                .filter(function(){
                    return $(this).index() === index;
                })
                .sortElements(function(a, b){

                    a = $(a).text();
                    b = $(b).text();

                    return (
                        isNaN(a) || isNaN(b) ?
                            a > b : +a > +b
                        ) ?
                            inverse ? -1 : 1 :
                            inverse ? 1 : -1;

                }, function(){
                    return this.parentNode;
                });

            inverse = !inverse;

        });

$('#jobTable tr').click(function(){
if($(this).index() != 0) {
    var thistext = $(this).text().substring(0,6);
    $("#joblistingDetail").load('jobview.php' , {jobID: thistext}).hide().slideDown('100');
    $("#jobTable tr").css("background", "#fff");
    $(this).closest('tr').css('background-color', '#C3D9FF');
}
});


});

$('#jobTable tr').hover(

function() {
    $(this).addClass('hover');
},
function() {
    $(this).removeClass('hover')
}
);

Is #joblistingDetail an ancestor of #jobTable? If so, you need to do event delegation originating from the #joblistingDetail element. — user400654
– user400654, Commented Mar 22, 2012 at 15:41
@KevinB '#jobListingDetail' only contains the information that is supplied by the jobview page — craighandley
– craighandley, Commented Mar 22, 2012 at 15:51
@sinopia If the table isn't being replaced/regenerated, the events should still be bound. Are any errors being thrown? — user400654
– user400654, Commented Mar 22, 2012 at 16:31

user400654 · Accepted Answer · 2012-03-22 18:27:04Z

1

Your jobview.php is more than likely including it's own version of jquery.js that is overriding the one on the parent page. Either remove it from jobview.php, or modify your .load to only pull in html from within a given selector such as

$("#joblistingDetail").load('jobview.php #target')

where #target is a selector selecting a specific container to pull in.

edited Mar 22, 2012 at 18:27

answered Mar 22, 2012 at 17:34

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with jQuery when fetching data using .load()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related