更改ID后，jQuery函數不起作用

Question

我有一個簡單的文件，其中包含一個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>

當隱藏菜單時，當您將ID更改為HTML中的showall並將腳本更改為slideToggle時，該功能可以正常工作，但是，當您單擊“全部隱藏”時，它將全部關閉，並且根據Firefox，將項目更改為

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

但是，再次單擊時它什么也沒做。 我可能做錯了什么？

這一頁

Answer 1

我希望綁定失敗，因為綁定完成后沒有showall

更好的選擇是切換

您可能需要切換功能以匹配頁面加載時顯示的內容

此處演示

$('#hideall').toggle(
  function(){
    $('.inner_div').slideUp('slow');
    $(this).text("Show all Menus");
  },
  function(){
    $('.inner_div').slideDown('slow');
    $(this).text("Hide all Menus");
  }
);

Answer 2

id消失后，它將分離綁定到它的事件。 您可以嘗試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>");
});

Answer 3

您需要使用委托或實時來定義事件。 上面的事件僅將處理程序綁定到頁面上的現有元素，而live / delegate函數則綁定到現有元素和將來的元素。

$(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>

Answer 4

您正在將click事件綁定到尚不存在的元素...請嘗試以下操作：

$('#showall').live('click', function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
    });