Add some jQuery after new content loaded with AJAX

Question

I'm using AJAX to request a sub section of my page. Here is an example of what the content requested could look like:

<div id="NewContentAfterPageLoad">
   <form>
     ...
     <input id="clickMe" type="submit" form="aForm" value="submit">
   </form>
</div>

<script>
   $(document).ready(function(){ 
      $('#clickMe').on('click', '#clickMe', function(e) {
         alert();
      });
   });
</script>

So this content is not present on page load.

Adding the jQuery like this doesn't work even though I'm using delegates.

Does this mean that any jQuery has to be present on page load for the browser to read it?

Is there a workaround for dynamically loaded jQuery?

Is `#clickMe` the new element? The new element has to be in the second argument to `.on()`. The selector that you bind the handler to must be present on page load. — Barmar, Jul 01 '14 at 02:41
Have you read this question? http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Jul 01 '14 at 02:42
@Juicy: can you please update the complete html. with selector and elements you want to target. — Milind Anantwar, Jul 01 '14 at 02:43

score 1 · Accepted Answer · answered Jul 01 '14 at 02:41

1

You need to attach event to element that does not change dynamically. you can also use them with $('body') or $(document).:

  $('body').on('click', '#clickMe', function(e) {
     alert('test');
  });

answered Jul 01 '14 at 02:41

Milind Anantwar

81,290
25
94
125

There's no `a` inside `#clickMe`. – Barmar Jul 01 '14 at 02:42
That's it, will delete this comment and give you the point in 10mins. Didn't realise I had to attach it to a static element. – Juicy Jul 01 '14 at 02:46
It is better to use closest static element instead of using with body or document. – Milind Anantwar Jul 01 '14 at 02:46

Add some jQuery after new content loaded with AJAX

1 Answers1