Блог

Ссылка открывает выпадающий список, чтобы выбрать действие сортировки. После сортировки страница загружается сама в себя с загрузкой 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>
  

Переместите привязки из функции doBindings() и используйте функцию live() от jQuery:

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

Кроме того, измените свои селекторы.

a#sortbutton менее эффективен, чем просто #sortbutton , как описано в jQuery API:

Для селекторов идентификаторов jQuery использует функцию JavaScript document.getElementById(), которая чрезвычайно эффективна. Когда к селектору идентификатора присоединяется другой селектор, такой как h2#pageTitle, jQuery выполняет дополнительную проверку, прежде чем идентифицировать элемент как совпадающий.

Я думаю, вам нужно отвязать события click в функции doLoad перед вызовом indexsort.php файл.

Я не буду рекомендовать live, потому что это очень дорогой метод.