Clever Geek Handbook

Bootable external jQuery file dependent on jquery plugin

I have a set of jqueryui tabs that load their contents dynamically when clicked. It works great except that one of the pages uses the jquery plugin itself. This leads to two problems:

  • The main page that stores the tabs throws an error on loading because there is js that refers to elements that have not yet been loaded (these elements are in an external file that contains the code that relies on the plugin).

  • If I insert a js that runs the plugin functionality into an external file, it is outside the document.ready function from the main page and therefore cannot be used.

Basically I'm looking for a technique that allows me to ajax to load an external html file into the DOM without having to deal with the main page itself, because JS that already exists expects HTML that doesn't exist yet.

Thank.

+2


source to share


2 answers


You need to encapsulate your jquery code inside a function $(document).ready()

. If you say that the code waiting to be loaded via AJAX may or may not be loaded at the same time as the parent page (i.e. the user has to click the tab to load it, which was the default loading), then you are design bad and you will have to rethink your approach. Basically, you cannot have code on the parent page referencing DOM elements that do not exist yet, and may not exist until the user clicks on the tab.



0


source


I haven't used it yet, but I think this is what you are looking for

Listen



This plugin provides a clean, lightweight solution for sites with dynamically loaded content or full event binding. The integration of bound event handlers is registered along with the corresponding selectors. And they will continue to work on new added content. This is achieved through event delegation, so the plugin will only work for events that bubble

0


source






More articles:


All Articles