javascript doesn't work on html elements from an included html file

Question

I have an out of the box theme that works fine using jquery events to trigger certain effects in both the header and the sidebar parts of the page.

Since there are many pages, I've tried to take those header, sidebar and footer sections, and move the code into external files, which are included with the following javascript strategy:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function{
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

The problem is that when the header and sidebar codes are included using the javascript the jquery events stop working. Is there either a better way to include an external file so that javascripts called in the parent file will affect all elements in the child files? Or, is the something else that I can do?

Use http://api.jquery.com/on/ to register events for static and dynamically added HTML elements. — andrewb, Nov 24 '13 at 22:21
FYI the document ready shorthand syntax is `$(function() {...});`, not `$(function{...});` — j08691, Nov 25 '13 at 04:40
If you provide your code. It's help to understand your real problem. — Ishan Jain, Nov 25 '13 at 04:59

Ishan Jain · Answer 1 · 2013-11-25T04:58:26.400

1

You can use .on() or .live() method for bind dynamically added element.

Jquery .on() method for dynamically added element - See http://api.jquery.com/on/#direct-and-delegated-events

Use jQuery's live() method. Description: Attach an event handler for all elements which match the current selector, now and in the future.

Try in Jsfiddle

edited Nov 25 '13 at 04:58

answered Nov 25 '13 at 04:51

Ishan Jain

8,063
9
48
75

javascript doesn't work on html elements from an included html file

1 Answers1