jquery after re-load, click doesn't work

Link opens dropdown to choose sorting action. When sorted, page loads into itself with jquery load, and dropdown is closed. We can do that one more time. After that, link which opens dropdown doesn't work anymore and dropdown stays closed.

How to fix this? The main goal is to have a working (opening and closing) dropdown menu for sorting dynamic table. (dropdown is also dynamic, so it needs to be loaded with ajax request)

<div id="wrapper">

    <!-- THIS IS DROPDOWN -->
    <div id="sortdropdown">
    <p><a href="" id="sortn">Name</a><br /><a href="" id="sortd">Date</a></p>
    </div>
    <!-- THIS IS LINK TO OPEN DROPDOWN -->
    <p><a href="" id="sortbutton">Sort by</a></p>            

</div>

<script type="text/javascript">
function doLoad(sort){
    var selector = "div#wrapper";
    $(selector).load('indexsort.php?act='+sort+' '+selector, function(){
        $('div#sortdropdown').hide();
        doBindings();
    });
}
function doBindings(){
    //sorts table on click - sorts by name
    $('a#sortn').click(function(event) {
        event.preventDefault();
        doLoad('sn');
    });
    //sorts table on click - sorts by date
    $('a#sortd').click(function(event) {
        event.preventDefault();
        doLoad('sd');
    });
    //opens/closes sort by dropdown menu
    $('a#sortbutton').click(function(event) {
        event.preventDefault();
        $('div#sortdropdown').toggle();
    });
}
$(document).ready(function(){
    //binds clicks so they are active after load method
    doBindings();
    //hides dropdown after landing
    $('div#sortdropdown').hide();
开发者_StackOverflow中文版});
</script>

Move the bindings out of the doBindings() function, and use jQuery's live() function:

$('a#sortbutton').live("click",function(event) {
    event.preventDefault();
    $('div#sortdropdown').toggle();
});

Also, change your selectors.

a#sortbutton is less efficient than simply #sortbutton, as described in the jQuery API:

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

I think you need to unbind the click events in doLoad function before calling the indexsort.php file.

I won't recommend live because its very expensive method.