https://fonts.googleapis.com/css?family=Raleway

"Complex Problems, Solved Quickly"

RCH Tech Solutions
  • Home
  • About
    • Services
  • Products
    • Visitor Logic Pro
    • Engage Theme For WordPress
    • WishList Member Upsell WordPress Plugin
  • Portfolio
  • Articles
    • Apache
    • Subversion
    • PHP
    • jQuery
    • WordPress Solutions
    • Exim
  • Members Dashboard
    • License Details
    • Support
Main Menu
  • Home
  • About
    • Services
  • Products
    • Visitor Logic Pro
    • Engage Theme For WordPress
    • WishList Member Upsell WordPress Plugin
  • Portfolio
  • Articles
    • Apache
    • Subversion
    • PHP
    • jQuery
    • WordPress Solutions
    • Exim
  • Members Dashboard
    • License Details
    • Support
  • License Details
  • Support

Post navigation

jQuery, Uncategorized |

September 8, 2014

| by Rodger Hollingsworth

jQuery Ajax with .html() does not fire js code

I ran across a situation where the I wanted to load the content of a div (modal popup) using jQuery AJAX.

Done it hundreds of times so implementing the AJAX call to populate the content was no issue,  however I now needed to include some custom JS just for the content of the popup.  I could not bind to the events of the elements in the popup until after the content of the popup was loaded, so this meant I could not include the JS in the main JS file, or if I did,  I would need to execute a function to bind to the events after the AJAX call was complete. (Example below)

When I looked at the data returned by the AJAX call,  it looked fine.  Some HTML,  then a script tag that included the small piece of JS I needed.

Problem was that the JS was firing before the HTML was actually added to the DOM.  (try it and you will see)

The core reason is that jQuery functions like .html() , .prepend and a few others will add the script tag separately (and what appears to be before) it actually adds the HTML content.

I know there are ways to accomplish this with rewriting the AJAX call to not use .html(data),  but I needed a quick way to accomplish this without alot of code. Welcome back setTimeout(). Easiest way I found to accomplish the task quickly was to wrap the small piece of JS code I was adding in a setTimeout() function.  IF you are loading a large amount of content,  this may not work.  you will need to test it.

Does not work for me

<div><input id="myButton" name="myButton" type="button" value="Click me" /></div>
<script>
$("#mybutton").on("click", function () {
 alert("Clicked");
});
</script>

Works for me

<div><input id="myButton" name="myButton" type="button" value="Click me" /></div> 
<script> 
setTimeout(
$("#mybutton").on("click", function () { alert("Clicked"); }) , 1000 ); </script>
Comment

Post navigation

Older Newer
Google+ comment widget by skipser

Menu

  • Home
  • About
    • Services
  • Products
    • Visitor Logic Pro
    • Engage Theme For WordPress
    • WishList Member Upsell WordPress Plugin
  • Portfolio
  • Articles
    • Apache
    • Subversion
    • PHP
    • jQuery
    • WordPress Solutions
    • Exim
  • Members Dashboard
    • License Details
    • Support

Recent Posts

  • SVN checkout to an existing live folder
  • jQuery Ajax with .html() does not fire js code
  • Installing and setting up Subversion on a WHM/Cpanel server
  • WHM Exim Configuration send mail with Amazon SES
  • WordPress Engage
  • UNIFFI
  • Gung-Ho
  • AthleanX
  • Collier County Fair
  • Simple PHP script to create a nice listing of directories only

Menu

  • Home
  • About
  • Products
  • Services
  • Portfolio
  • Contact Us

Products

Engage Theme For Wordpress

WLM Upsells Wordpress Plugin

Support

footer-logo

© RCH Tech Solutions 2017

Lost your Password

OR