Jquery must not be reloading

I have this page

page

If 开发者_如何学JAVAyou go there you will see products and next to each product on the left is a more button. Clicking on that button you get the scrolldown which works great....

There is a dropdown on the top which i have a Jquery load on it, which refreshes the entire page with new content... if you click on the more again after you select the top dropdown to any type of "Fast food Pos Station" the scroll doesnt work anymore... I am at a lose why this is happening

$("#main_content").load("function.php?type="+type+"piz&count=5");

this is the call that is firing when the user selects the dropdown

here is the code for the toggle

    // blue item expand
$('.item-blue .btn-expand').click(function () {

    var btn = $(this);
    $(this).parent().prev().slideToggle(function () {
        btn.toggleClass('btn-expand-h');
    });
    return false;
});

You have to rebind the event that is handling the click on "more"...

You bound it on the Load event of the document but you aren't adding it on the click of the menu...

$('.select-big ul li a').click(function () {
    // your code.....

    // asynchronous task wrong way...
    $("#main_content").load("function.php?type="+type+"&count=5");

    // this is the right way...
    $("#main_content").load("function.php?type="+type+"&count=5", function(){
        $('.item-blue .btn-expand').click(function () {
            var btn = $(this);
            $(this).parent().prev().slideToggle(function () {
                btn.toggleClass('btn-expand-h');
            });
            return false;
        });

        // plus any other code you need to run once
        // the data from the server is "served"
    });

    // your code...
});

Your adding new elements to the DOM after the document.load event has occurred. Thus the event that bind the events to the "more" link already ran against the "original" DOM elements...

I am guessing because when you reload the content you are not rebinding the event handlers for the content that you are replacing.

Change your:

$("#main_content").load("function.php?type="+type+"piz&count=5");

to:

var successCallback = function(responseText, textStatus, XMLHttpRequest) {
    // rebind your event handlers here
    $('.item-blue .btn-expand').click(function () {
        var btn = $(this);
        $(this).parent().prev().slideToggle(function () {
            btn.toggleClass('btn-expand-h');
        });
        return false;
    });
};

$("#main_content").load("function.php?type="+type+"piz&count=5", successCallback );

Nice looking site btw :)

Since you're using jQuery 1.4.x, take a look at jQuery's live() method. It let's you avoid the need to rebind manually after an AJAX load. As such, your code could be modified to just be:

$('.item-blue .btn-expand').live('click', function () {
  var btn = $(this);
  $(this).parent().prev().slideToggle(function () {
    btn.toggleClass('btn-expand-h');
  });
  return false;
});

It will automagically rebind the events after your load takes place. live() has been in jQuery since 1.3.