jQuery on elements created via Javascript

Question

I'm using Google Maps API and have a lot of html that is injected through the script using .html() etc. I have a few triggers set up to select those elements that are injected in, but as the HTML isn't 'ready' or 'loaded' it, it fails to select.

I thought a simple $(window).load would've worked, but it doesn't seem to be.

This is my code so far:

$(window).load(function(){
    $('ul.campaign-list li a').on('click', function (e) {
        $("html, body").animate({ scrollTop: "300px" });
        alert("Scrolls");
    });
});

I am using .on, instead of .live() but I'm also guessing this would be the right way to do it. I added the alert(); in just to test my code but alas it still doesn't load.

Any ideas?

Thanks, R

Patsy Issa · Accepted Answer · 2013-10-03 13:31:53Z

2

Edit:

$('#container_12').on('click', 'a', function(){ 
  $('html, body').animate({ 
    scrollTop: 300 
  }, 500); 
});

After the discussion in chat we pinpointed the problem and fixed it accordingly, i ll keep the original answer so it helps people with such a case.

When using .on() in order to get it to work for dynamic content you need to specify a container or context:

$('ul.campaign-list li a').on('click', function (e) {
   $("html, body").animate({ scrollTop: "300px" });
   alert("Scrolls");
 });

Becomes :

$(window).on('click', 'ul.campaign-list li a', function (e) {
   $("html, body").animate({ scrollTop: "300px" });
   alert("Scrolls");
});

Note that you can replace window with any container that isn't dynamically added.

Refer to the .on() documentation for a more detailed description.

edited Oct 3, 2013 at 13:31

answered Oct 3, 2013 at 12:48

Patsy Issa

11.3k5 gold badges57 silver badges76 bronze badges

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

7 Comments

John the Painter Over a year ago

I thought this would work too, thanks, but it doesn't even do the alert so I'm assuming it's not working. There's no errors in my console.

Patsy Issa Over a year ago

@rdck Is it still wrapped in your $(window).load() function ? If so remove it and replace it with $(function(){ your code goes here});

Patsy Issa Over a year ago

@rdck What page are the .campaign-list at couldn't find them

John the Painter Over a year ago

Below the map – the list of venues

Patsy Issa Over a year ago

@rdck are you preventing default in your gotoPost() function ?

|

Tomer · Accepted Answer · 2013-10-03 12:51:35Z

0

jquery uses a different method to make sure the dom is ready, so instead of $(window).load use:
```
$( document ).ready(function() {
  // Handler for .ready() called.
});
```
When using on, the container you are binding to must be present when the page is loaded, so if you want to bind a click event to a which is dynamically added, you need to bind the on to the container which is not dynamic:
```
$('ul.campaign-list li').on('click','a', function (e) {
    $("html, body").animate({ scrollTop: "300px" });
    alert("Scrolls");
});
```

answered Oct 3, 2013 at 12:51

Tomer

17.9k16 gold badges82 silver badges139 bronze badges

2 Comments

Patsy Issa Over a year ago

$( document ).ready() checks if the dom is ready not loaded (pictures and such).

Tomer Over a year ago

@PatsyIssa - just a miss-use of the word, obviously i meant 'ready' :)

spiralx · Accepted Answer · 2013-10-03 12:53:08Z

You shouldn't use $(window).load for code that you want to run once the DOM has loaded, use $(document).ready(function(){...}) or the shortcut $(function(){...}) instead. Also, your .on() call will only apply to elements that exist at the time you make the call. I guess what you actually want is something like this:

$(function() {
  $('ul.campaign-list').on('click', 'li a', function (e) {
    $("html, body").animate({ scrollTop: "300px" });
    alert("Scrolls");
  });
});

This will trigger when anything matching the li a selector within the element(s) matched by ul.campaign-list is clicked - assuming the ul element is present in the page's HTML on loading.

The old .live() call is the equivalent of doing:

$(document).on("click", "ul.campaign-list li a", function(ev) { ... });

if that helps

Collectives™ on Stack Overflow

jQuery on elements created via Javascript

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related