Issue with jQuery when fetching data using .load() - php

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

Answer 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.