Question

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 🙂

Answer 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();
        });