Question

im a js noob . i have `
with this my hidden div shows up but the ajax not, with the second the ajax works but shows up directly – i would like to include a click event on the ajax script but dont know how to:

$(document).ready(function(){
   $(".project-thumbnails a").click(function(event){
    event.preventDefault();
    $('#project-container').slideDown('slow');
    return false;
   });

   $('a.project-close').click(function(event){
    event.preventDefault();
    $('#project-container').slideUp('slow');
    return false;
   });

});

and

jQuery(document).ready(function($) {

    var $mainContent = $("#project-container"),
        siteUrl = "http://" + top.location.host.toString(),
        url = ''; 

    $(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
        location.hash = this.pathname;
        return false;
    }); 
    $("#searchform").submit(function(event) {
        location.hash = '?s=' + $("#s").val();
        event.preventDefault();
    }); 
    $(window).bind('hashchange', function(){
        url = window.location.hash.substring(1); 
        if (!url) {
            return;
        } 
        url = url + " .entry"; 
        $mainContent.animate({opacity: "0.1"}).html('').load(url, function() {
            $mainContent.animate({opacity: "1"});
        });
    });
    $(window).trigger('hashchange');
});

how can I combine those to snippets that finally the DIV with the AJAX opens up only after I click on it and is it possible to close it?

Answer 1

The first solution would be to use delegated events (.delegate() or .on() with a selector). Instead of registering the handler on the links themselfes, register it on an element that is not overwritten/reloaded/added by the ajax script, and it will work for later appended elements too.

The second solution would be to execute the function that registers the handlers not (only) onDOMready, but onHashchange. This event is triggered by your ajax script to indicate that there is new content. Yet with that solution you’d need to prevent the code registering a handler twice on the same element, so you should use the first one.