Question

I’m currently working on my new portfolio. To check the problem I’m having you can go to http://www.zeiteffekt.de/relaunch/#mmd and click on ‘details’. What happens there is a slidetoggle effect in which a new html file is laoded via ajax.

$(".show_details").click(function(){            
        $("#mmd_details").slideToggle("slow");
    });

$(document).ready(function() {
      // select all the links with class="load_content", when one of them is clicked, get its "href" value
      // adds a "loading..." notification, load the content from that URL and
      $('a.load_content').click(function() {
        var url = $(this).attr('id');
        $('#mmd_details').html('Laden...').load(url);
        return false;
      });
    });

My problem is the following: I have a simple ‘close’ link in the html file which was loaded by ajax which simply won’t toggle the div container. When I click on the initial ‘details’ link it will close the div. The same link inside the loaded html won’t do that.

Also scrollTo won’t work when it is used inside the html file loaded by ajax.

This is the scrolling function:

$(document).ready(function() {
        $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 700);
        });
    });

I have absolutely no clue why the jquery scripts won’t work in the ajax file. I hope you can help me.

Cheers,
Tim

Answer 1

jQuery binds it’s event handlers to the dom when the page is finished loading. If you add to the dom afterwards, say via ajax, jQuery does not know about the new elements.

You need to use ‘on‘ or ‘live’ depending on your version of jQuery.