How to include an HTML file with jQuery?

Question

I want to make my code separate so I decided to divide each `div` to html files. Each HTML file has some jQuery click events. I have 2 files `index.html` and `menu.html`. Problem is that I have to include the jQuery library in both files to make it work. Is there any way that I can include library one time and have it work on both files? I tried to include the library in the index page only, but then the menu click doesn't work. I included the `menu.html` file through an iframe. ``` ```

Accepted Answer

You can add `menu.html` into the DOM of `index.html` with the jQuery `load()` method. This way the jQuery instance created in `index.html` would also apply to the content loaded from `menu.html`.

For example in `index.html` you can do:

```
$(document).ready(function() {
    $('#some-menu').load('some-local-path/menu.html');
});
```

Note how `$('#some-menu')` is just another element in `index.html` into which we load the contents of `menu.html`. It's also important to note that because of the same-origin-policy, the AJAX request performed as part of the `load()` method would only work with files in the same domain, protocol and port (unless you're using CORS).

How to include an HTML file with jQuery?

Solution

Problem