Hello,

I'm having a problem running a function on links inserted with Ajax at
the following address http://tinyurl.com/3crrvv

I have three unordered lists a main, sub, and sub-sub. When a link in
the main is clicked it retrieves the corresponding sublinks and
inserts them into the sub list. Then for test purposes if I click a
link in the sub list a sub sub list appears. For test purposes the sub-
sub list is prepopulated just to see it show. However my function
won't run when the second lists links are inserted. But if those ones
are hardcoded in to start it works fine. So for whatever reason the
links retrieved from ajax won't run the click function.

Code:

startval = '';
                $('#submenu').hide();
                $('#subsubmenu').hide();
                $('#topmenu li a').click(function() {
                        linkval = $(this).text();
                        if(startval == linkval)
                        {
                                alert("Same Link idiot!");
                        } else {
                                $.ajax({
                                        type: "GET",
                                        url: "menu.php?name="+escape(linkval),
                                        dataType: "html",
                                        success: function(msg){
                                                $('#submenu').html(msg);
                                        }
                                });
                                $('#topmenu li a').removeClass('on');
                                $('#topmenu li a').addClass('off');
                                $(this).removeClass("off");
                                $(this).addClass("on");
                                $('#submenu').show();
                                //startval = linkval;
                        }
                return false;
                });
                $('#submenu li a').click(function() {
                        $('#submenu li a').removeClass('on');
                        $('#submenu li a').addClass('off');
                        $(this).removeClass("off");
                        $(this).addClass("on");
                        $('#subsubmenu').show();
                return false;
                });
        });

HTML:

<ul id="topmenu">
<li><a class="off" href="#">Current Projects</a></li>
<li><a class="off" href="#">Previous Work</a></li>
<li><a class="off" href="#">Writing</a></li>
<li><a class="off" href="#">Current News</a></li>
<li><a class="off" href="#">Lectures and Teaching</a></li>
<li><a class="off" href="#">Presentation Info</a></li>
<li><a class="off" href="#">Bio</a></li>
<li><a class="off" href="#">Press</a></li>
<li><a class="off" href="#">Store</a></li>
</ul>

<ul id="submenu">
<li></li>
</ul>

<ul id="subsubmenu">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>

Hope I explained it alright, right now on the site the first two links
retrieve the sub ones, which works. But clicking the new links won't
bring up the hidden #subsublist.

Reply via email to