jquery重新加载后，点击不起作用

Question

链接打开下拉菜单以选择排序操作。排序后，页面通过 jquery load 加载到自身，并且下拉列表关闭。我们可以再做一次。之后，打开下拉菜单的链接不再起作用，下拉菜单保持关闭状态。

如何解决这个问题？主要目标是拥有一个用于对动态表进行排序的工作（打开和关闭）下拉菜单。 （下拉也是动态的，所以需要用ajax请求加载）

<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();
});
</script>

Answer 1

将绑定移出 doBindings() 函数，并使用 jQuery 的 live() 函数：

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

另外，更改你的选择器。

a#sortbutton 的效率比简单的 #sortbutton 低，如 jQuery API：

对于 id 选择器，jQuery 使用
JavaScript 函数
document.getElementById()，即
非常高效。当另一个
选择器附加到 id
选择器，例如 h2#pageTitle、jQuery
之前执行附加检查
将元素识别为匹配项。

Answer 2

我认为您需要在调用indexsort.php文件之前取消绑定 doLoad函数中的点击事件。

我不会推荐live，因为它非常昂贵。