Jquery Dynamic URLs not working?

Question

So i searched around on the internet and didn't really understand how this works. I have a div element on my page that loads the leaderboard for my game dynamically. The idea was so that when you click on a player's name, the div fills with their personal stats, replacing the old one. It was meant so the page doesnt need to refresh. The url class never changes, and the id always changes depending on the user's name.

In the code the link is generated like this:

<a class="ulink" id="'.$user.'" href="#">'.$user.'</a>

and my jquery like this:

$(".ulink").on('click', function (event) {
        alert("hi");
        event.preventDefault();
});

When i click on the player's name it loads fine but when i click let's say a different skill to load the div with the main table again, and try to click the player's name again, it stops working ???

I've literally spent days on this part of my leaderboard script and its being a complete pain in the butt.

How do i make it so that when the div is reloaded that the links will continue to send the alert message? After i replace the DIV element they no longer work. I looked it up on google but could not come down with a solution.

Thanks in advance.

You're binding events directly to DOM nodes and then you're removing those DOM nodes. You either need to re-bind those event handlers or use event delegation. — André Dion, May 13 '14 at 14:21
possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — Kippie, May 13 '14 at 14:22

score 1 · Accepted Answer · answered May 13 '14 at 14:23

1

Since you are dynamically creating the elements use the following code:

   $("body").on("click", ".ulink", function (event) {
            alert("hi");
            event.preventDefault();
     });

answered May 13 '14 at 14:23

mohamedrias

18,326
2
38
47

absolutely wonderful! this worked perfect. was just the base for my code, but how do i get the id of what i click using that? The user's name is being posted to another page, which i already know how to do. I jsut need to know how to get the url id xd – OGKingFox May 13 '14 at 14:28
inside the callback function , this.id will give you the id, in jQuery way $(this).attr("id") – mohamedrias May 13 '14 at 14:30
ah thank you very much! You just answered in 10 minutes what i couldnt figure out for 3 days. Much love <3 – OGKingFox May 13 '14 at 14:31

score 0 · Answer 2 · answered May 13 '14 at 14:20

0

$(".ulink").on only does something to the .ulinks that are currently there. If you create new ones later, they won't have the event attached. Either call your on code again or use delegate.

answered May 13 '14 at 14:20

mrks

8,033
1
33
62

score 0 · Answer 3 · answered May 13 '14 at 14:26

If you bind your event listener to the document and use jQuery on() then the event will be added to new and existing elements. Try this:

$(document).on('click', '.ulink', function (event) {
        alert("hi");
        event.preventDefault();
});

For more info check out the jQuery documentation: http://api.jquery.com/on/

Jquery Dynamic URLs not working?

3 Answers3