Question

链接打开下拉列表以选择排序操作。排序后，页面加载jquery加载到自身，并关闭下拉列表。我们可以再这样做了。在此之后，打开下拉列表的链接不再起作用，下拉列表将保持关闭状态。

如何解决这个问题？主要目标是有一个工作（打开和关闭）下拉菜单，用于排序动态表。（下拉列表也是动态的，因此需要加载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文件之前，你需要unbind doLoad函数中的click事件。

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

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

2 个答案: