Функция JQuery не работает после изменения ID - PullRequest
Новая
       4

Функция JQuery не работает после изменения ID

2 голосов
/ 21 июня 2011

У меня есть простой файл с Jquery-скриптом, который выглядит так: 

<script type="text\javascript">     
$('.grey_title').click(function(){
        $(this).parent().find('.inner_div').slideToggle('slow');
    });
    $('#hideall').click(function(){
        $('.inner_div').slideUp('slow');
        $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
    });
    $('#showall').click(function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
    });
   });
</script>
  <div><span id="hideall">Hide all Menus</span></div>

Функция отлично работает, скрывая меню и когда вы изменяете идентификатор для показа в HTML и скрипт для slideToggle, однако, когда вы нажимаете Скрыть все, он закрывает все и в соответствии с Firefox меняет элемент на 

<span id="showall">...</span>

но при повторном нажатии ничего не происходит. Что я могу делать не так?

страница

Ответы [ 4 ]

3 голосов
/ 21 июня 2011

Я ожидаю, что привязка потерпит неудачу, так как при выполнении привязки не будет showall

Лучший выбор - переключить

Возможно, вы захотите переключить функции так, чтобы они соответствовали показанным при загрузке страницы

ДЕМО ЗДЕСЬ 

$('#hideall').toggle(
  function(){
    $('.inner_div').slideUp('slow');
    $(this).text("Show all Menus");
  },
  function(){
    $('.inner_div').slideDown('slow');
    $(this).text("Hide all Menus");
  }
);
2 голосов
/ 21 июня 2011

Когда идентификатор исчезает, он отключает привязанное к нему событие.Вы можете попробовать привязку события live.

$('#hideall').live('click', function(){
    $('.inner_div').slideUp('slow');
    $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
});
$('#showall').live('click', function(){
    $('.inner_div').slideDown('slow');
    $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
});
0 голосов
/ 21 июня 2011

Вы связываете событие click с элементом, который еще не существует ... попробуйте это: 

$('#showall').live('click', function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
    });
0 голосов
/ 21 июня 2011

Вам нужно использовать делегат или live для определения событий.То, что делают вышеописанные события, это только связывает обработчик с существующими элементами на странице, в то время как функция live / делегата связывается с существующими и будущими элементами. 

$(document).delegate('.grey_title', "click",function(){
        $(this).parent().find('.inner_div').slideToggle('slow');
 }).delegate('#hideall'."click", function(){
        $('.inner_div').slideUp('slow');
        $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
}).delegate('#showall',"click", function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
});

</script>
  <div><span id="hideall">Hide all Menus</span></div>
...