How to call JQuery functions after page is loaded?
Question
I have a page that has a button. When the button is pressed an AJAX call is made and then the html from that call replaces a div container I have on the main page. I have scripts that need to be loaded on the second page. So my concern is that when the scripts from the second page are running, it gives me a " Object # has no method 'find' " error in the console. Which I know that this is an issue of the script not being able to call the JQuery functions. Does anyone know how I can call the JQuery functions after a second page is generated? Here is an example as to what my page does:
MAIN PAGE:
<html>
<head>
<script type="text/javascript">
$(document).ready({
$('body').on('click', '.button', function() {
$.ajax({
type: 'GET',
url: 'page.php'
data { ... },
success: function(e){
$('#container').html(e);
}
});
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button class="button" value="Click me!"></button>
<div id="container">
</div>
</body>
</html>
PAGE.PHP:
echo '<div id="dropbox">';
echo ' <div class="message">Drop files here</i></div>';
echo '</div>';
echo '<script src="js/filedrop.js"></script>';
echo '<script src="js/upload.js"></script>';
And then when the scripts are executed from the second page I get the < Object # has no method 'find' > error. If I include the scripts on the main page, nothing works in the scripts. Anyone know where to point me in the right direction for all of this to work?
EDIT **
Sorry to confuse you guys. The code I put was just something that I had put together real quick. The button click code would be in the document.ready, but the other functions that are called from the second scripts are not in a document.ready. Do they need to be in a document.ready callback for them to recognize the JQuery functions?
EDIT 2 **
Thanks for clarifying that you can have more than one Document.Readys. I will be selecting the answers after the 10 minute window is up.
2 answers
solution1
4 ACCPTED 2013-06-23 23:28:19
Your script tags are in the wrong order. You have to load jQuery before you use it. Also, put all code that interacts with the DOM in a $(document).ready() callback:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').on('click', '.button', function() {
$.ajax({
type: 'GET',
url: 'page.php'
data { ... },
success: function(e){
$('#container').html(e);
}
});
});
});
</script>
solution2
1 2013-06-23 23:26:11
put your code inside
$(document).ready(function() {
// your code
$('body').on('click', '.button', function() {
$.ajax({
type: 'GET',
url: 'page.php'
data { ... },
success: function(e){
$('#container').html(e);
}
});
});
});
document.ready means that page are loaded or create your file myscript.js , in that file wrap all your code in document.ready and
echo '<script src="js/myscript.js"></script>';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.