The issue is that the click function is bound on document.ready - so stuff added later won't have the binding.
See the FAQ: http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_Ajax_request.3F On Jun 18, 10:21 am, Brian Cummiskey <[EMAIL PROTECTED]> wrote: > Hello all, > > New to this list and working on my first site with jQuery. So far so > good, for the most part. > > I've run into one problem that i can't put my mouse on. > > I have a simple slide-out 'cart'. After you add an item via an ajax > post, the slide out shows the cart with the new items in it. My problem > lies in the scope of the 'close' window. > > I'm using the following functions: > > $(document).ready(function() { > /* Slide down mini cart when user clicks "Add to Cart" button */ > $(".add-to-cart a").click(function () { > //show slide out cart > $("#mini-cart").slideDown("slow"); > }); > > /* Slide up mini cart when user clicks "Close Button" button */ > $("#close-mini-cart a").click(function () { > $("#mini-cart").slideUp("slow"); > }); > > }); > > My problem lies in that i'm using ajax and DOM to add elements to the > #mini-cart div on the fly based on the request, which eventually prints out > <div id="close-mini-cart"><a href="#">Close Cart</a></div> > > The slideDown triggers correctly. And the slideUp works when called > directly (non-ajax/dom build). > > Is this a scope issue? > > does jQuery need to be re-initilaized to 'learn' of the new div with > that particular ID after it's been generated from the back end process? > > Thanks for the advice.
