including an html file in another html file and JS

Question

Suppose i have two html files, one.html and two.html. I want to include two.html in one.html, so i have done that like this,

<script>
        $(function(){
            $("#middle").load("two.html");
        });
</script>

I have a script file say, script.js which i am loading at the end of one.html as

<script src="scripts/script.js" ></script>

In that file I am writing function to be implemented on elements of two.html. But the functions are not being applied on two.html. So, what's the correct way of doing this?

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Quentin, Feb 17 '14 at 13:15

score 2 · Accepted Answer · answered Feb 17 '14 at 13:18

2

Use $.get jQuery function

$.get( "tow.html", function( data ) {
  $( "#middle" ).html( data );
  alert( "Load was performed." );
});

answered Feb 17 '14 at 13:18

Abudayah

3,599
6
37
56

score 1 · Answer 2 · answered Feb 17 '14 at 13:24

1

Why don't you use an (hidden?) iframe ? If it's located on the same server, you can access parent page (one.html)'s functions and elements:

window.parent.example_function();

or play with its DOM elements.

answered Feb 17 '14 at 13:24

Jav Rok

331
1
7

score 0 · Answer 3 · answered Feb 17 '14 at 13:30

0

To add events on dynamically loaded elements you need to use .live() function in jquery < 1.9 and .on() if jquery >= 1.9

.live()

.on()

answered Feb 17 '14 at 13:30

Bilal

2,495
3
24
38

score 0 · Answer 4 · answered Feb 17 '14 at 15:15

You can first load your second pages content and include the javascript only after the additional HTML was included.

$.get("two.html", function(data) {
    $('#middle').html(data);
    $('head').append($('<script>').attr('type', 'text/javascript').attr('src', 'scripts/script.js'));
});

including an html file in another html file and JS

4 Answers4