That's probably because your second click assignment is executed
before your new HTML data is inserted into the document. The reason
this occurs is because the AJAX by default does not hold up the script
so it just fires the request off and executes the rest of the script.
To workaround this, set the option async:false to your $.post(). This
will tell javascript to wait for the AJAX response and callback
function to complete before continuing to the rest of your script.
On Mar 4, 6:57 am, twisteddiana <twisteddi...@gmail.com> wrote:
> I've read that if you add new elements to the document, or if you
> modify the already existing elements and you want to asign a behaviour
> to them via jQuery, you would have to bind the new elements with the
> existing behaviour pattern.
>
> Could anyone explain to me why this is not working:
>
> $(document).ready(function() {
> $("#menu a").click(function(e){
>
> $.post("jquery.php", {Option: $(this).html()}, function(xml) {
> $("#content").html("<h1>"+$("txt", xml).text()
> +"</h1><p>"+ $
> ("aaa",xml).text() +"</p><h1>"+ $("txt", xml).text() +"</h1><p>" + $
> ("bbb",xml).text() + "</p>");});
>
> $('#content p').hide();
> $('#content h1').click(function() {
> $(this).next().slideToggle();
> });
> });
>
> $('#content p').hide();
> $('#content h1').click(function() {
> $(this).next().slideToggle();
> });
> });
>
> The "original" click/toogle data from #content div works just fine,
> but once i change the contents of #content via AJAX, click/toogle
> doesn't work at all.
>
> Thank you very much.
