How to load JS in a dynamically loaded content?

Question

What is the best approach to apply JS to the dynamically loaded content. Let say I have this:

form.html (to load dynamically)

main.html with a button, when clicked DIV shown and form.html dynamically loaded.

In my main.html I have JS that suppose to find form tag (from a dynamically loaded form) and process it further (I use jQuery). I could have included that JS in form.html and then it works, but what I want to do is to have my JS in main.html and yet be able to manipulate dynamically loaded content with it. Can that be achieved? Thanks.

EDITED:

form.html

<form id="f"><input name="i"/></form>

main.html

<script>
$(document).ready(function() {
  $('#b').on('click', function() {
    $('#div').load('form.hmtl');

    //Again, I know that I can pass JS code into load() call. I want to be able
    //to avoid that.
  });

  var $form = $('#f');

  $form.mask() //it's a jquery plugin that blocks mouse clicks on a specific element

  //note that form is not yet loaded. I know that I can pack the code above into a
  //function and pass it with .on('click', function(){}) call. The question is:
  //is it possible to avoid that.
});
</script>
<button id="b">Load Form</button>
<div id="div"></div>

tymeJV · Accepted Answer · 2013-06-20 13:41:35Z

3

Yes, with event delegation. Say the following input is loaded in dynamically:

<input type="button" value="click me" id="btnTest" />

To capture this elements click event, we'll bind the event to the container of the element (in this example document) and listen for a click on that element:

$(document).on('click', '#btnTest', function() {
    console.log("You clicked dynamic content!");
});

Reference: http://api.jquery.com/on/

answered Jun 20, 2013 at 13:41

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1863635 Over a year ago

well that's true, I can use .on() for events. BUT, how then i attach event on load. I want to mask form, load more JSON data, and then unmask form after JSON data is ready (and all this on load of the dynamic content)... Any ideas? Thanks.

tymeJV Over a year ago

Can you post your AJAX calls, you can bind the handlers at load time as well.

tymeJV Over a year ago

I think on is going to be the easiest route.

miwoe · Accepted Answer · 2013-06-20 13:46:43Z

0

Either you process it after changing the DOM as tymeJV suggested or you add a ready-event to the newly added content and invoke the desired code from the ready event. I would prefer first and second only if you do not have direct control about the dom change.

answered Jun 20, 2013 at 13:46

miwoe

7971 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to load JS in a dynamically loaded content?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related