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

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.

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.
@rdck Is it still wrapped in your $(window).load() function ? If so remove it and replace it with $(function(){ your code goes here});
@rdck What page are the .campaign-list at couldn't find them
@rdck are you preventing default in your gotoPost() function ?

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

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"); }); 
```

$( document ).ready() checks if the dom is ready not loaded (pictures and such).
@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

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Related