JQuery Click On Appended Elements Not Working For Dropdown

Go To StackoverFlow.com

1

I'm having trouble getting my dropdown menu to still work after I empty it's contents and append new ones.

Here is the page I am having trouble with (try selecting a wallpaper resolution initially, then selecting a different wallpaper from the 5 at the top and try again): http://www.nba.com/warriors/wallpapertest_020.html

In $(document).ready I have:

        $(".dropdown dd ul li a").click(function() {
            var text = $(this).html();
            $(".dropdown dt a span").html(text);
            $(".dropdown dd ul").hide();
        });

This works fine the first time around, but when I change up the contents of the dropdown, it stops working. Is there a way to recall the .ready() function to recognize the new additions? Or a better way to do this?

I also tried delegate() like so, but that stops it from functioning entirely:

       $(".dropdown dd ul li").delegate('a', 'click', function() {
            var text = $(this).html();
            $(".dropdown dt a span").html(text);
            $(".dropdown dd ul").hide();
        });

Any assistance would be much appreciated :)

2012-04-05 19:34
by dougmacklin
Have you tried to use .on() - Sven Bieder 2012-04-05 19:37
@Sven The problem still persists: [(nba.com/warriors/wallpapertest_021.html) - dougmacklin 2012-04-05 19:49


1

try using on()

$(".dropdown dd ul li a").on('click', function() {
            var text = $(this).html();
            $(".dropdown dt a span").html(text);
            $(".dropdown dd ul").hide();
        });
2012-04-05 19:42
by rgin
The problem still persists: [(http://www.nba.com/warriors/wallpapertest_021.html) - dougmacklin 2012-04-05 19:48
try posting some relevant html. I'm on a slower laptop and can barely manage to debug the page - rgin 2012-04-05 19:56
hey I got it to work using live(): $(".dropdown dd ul li a").live('click', function() { . I was under the impression that using live() is not good practice though.. - dougmacklin 2012-04-05 20:02
You must be using an older version of jquery. .live was deprecated and replaced with .on http://api.jquery.com/live - rgin 2012-04-05 20:03
importing 'jquery-1.7.2.min.js' isn't that the newest release - dougmacklin 2012-04-05 21:21
Yes it is. That's strange - rgin 2012-04-05 21:24
jquery noob here.. same problem.. same solution. But it makes no sense to me - because i am using jquery-1.7.2.min.js, and .live is supposed to be depreciated... but .on is failing (in my case) while .live is working - govinda 2012-07-14 00:12
Ads