StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to call JQuery functions after page is loaded?
text
Body
copied!<p>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:</p> <p>MAIN PAGE: </p> <pre><code><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> </code></pre> <p>PAGE.PHP:</p> <pre><code>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>'; </code></pre> <p>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?</p> <p>EDIT **</p> <p>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?</p> <p>EDIT 2 **</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload