Reputation: 138
I got this problem which I tried to fix already a couple of times, but without succes.
Here's what I got :
1/ when clicking on an item in page#1 I execute the following code :
$('.row').click(function() {
$('#content').load('detail.php', function() {
// some extra binding code
});
});
detail.php is a PHP file with PHP code and HTML snippit (so no complete HTML page)
2/ This is a snippit of the content of detail.php :
<script type="text/javascript">
$(document).ready(function() {
$('#detail_content').load('subdetail.php'); <--- problem is here
});
</script>
<section id='detail_content'>
</section>
This second load doesn't want to work. I found out why, but I don't understand why it won't work. If I put an alert as first jQuery statement that check's if the element 'detail_content' exists, then it returns false. So this is the reason why the second load can't work. However, I don't understand why jQuery can't seem to find that element a that specific time ? I am executing it in a $(document).ready(...) - block, so this code should only execute when the DOM is loaded, right ?
Anybody knows why this isn't working and how i can fix it ?
Tia !
Upvotes: 0
Views: 90
Reputation: 420
your DOM is ready after the page load is done. Loading a page via methods like jQuery.load, jQuery.get and so on won't trigger another DOM Ready event, as the DOM is only being manipulated (= new content is being inserted), but not re-generated (and thus the DOM stays ready throughout the whole AJAX load process).
A possible solution would be, to just execute your code within the callback of
$('#detail_content').load('subdetail.php');
example code:
$('#detail_content').load('subdetail.php', function(){
alert('page fetched!');
});
should work and an alert should be triggered as soon as your page is loaded.
greets,
Robin Heller
Upvotes: 1