Two ways. One is to extend your ajax callback to un-bind all existing button handlers and then re-bind them now that your new content has been inserted. OR the elegant way; use the .live method instead of .bind, it is designed for just such occasions.
http://docs.jquery.com/Events/live#typefn good luck On Dec 4, 11:38 pm, mysterious79 <gray8...@gmail.com> wrote: > This probably isn't a jquery question precisely, but jquery is being > used as my method for making ajax requests. > > I'm running into a recurring problem where functions declared on the > initial page load aren't manipulating content loaded later via ajax. > For example, when the page loads I may have two ".button" elements but > then I pull in three more via ajax. A function that affects > that .button class will work on the original elements but not the ones > added via ajax. > > Here is a very basic but functional example of this: > > -------------------------------------------------- > <script type="text/javascript"> > $(function() { > $('p').click(function() { > $.ajax({ > url : 'testing.html', > type: 'get', > success : function(data) { > $('.container').append(data); > } > }); > });}); > > </script> > > <div class="container"> > <p>Hello</p> > </div> > -------------------------------------------------- > > In this example, a click of any p tag should append the content from > testing.html onto the doc. testing.html is a fragment that has a > duplicate p tag. Well, I want every new p tag to have the same > behavior as the original one. How do I do that? I've found that > putting that writing that function into the fragment can solve the > problem but this isn't the sort of solution I'm looking for. > Sometimes, redeclaring the function in the success function will work > as well, but this is inelegant as I'd like any function declared in > the site js file to be available. > > What is a good method for getting around this sort of trouble? > > Thanks
