CODEWITHSUNDEEP
phpjavascriptjquery
craighandley
craighandley

Reputation: 156

Issue with jQuery when fetching data using .load()

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

Upvotes: 3

Views: 134

Answers (1)

Kevin B
Kevin B

Reputation: 95058

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.

Upvotes: 1

Related Questions