更改ID后JQuery功能不起作用答案

【问题标题】：JQuery function does not work after changing ID更改ID后JQuery功能不起作用
【发布时间】：2011-06-21 16:33:25
【问题描述】：

我有一个简单的文件，其中包含一个 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 中将 ID 更改为 showall 并将脚本更改为 slideToggle 时，但是当您单击全部隐藏时，它将全部关闭，并且根据 Firefox，将项目更改为

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

但是，当再次单击时，它什么也不做。我可能做错了什么？

页面

【问题讨论】：

标签： javascript jquery html slidedown slideup

【解决方案1】：

我预计绑定会失败，因为绑定完成后没有显示效果

更好的选择是toggle

您可能希望切换功能以匹配页面加载时显示的内容

DEMO HERE

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

【讨论】：

切换可能是最好的选择。
@Travis 我同意 :) 这是accept an answer
@Travis 如果 Toggle 是最好的选择，你怎么会接受另一个答案？
@Travis Pessetto：如果你认为这个答案更好，你真的应该“不接受”另一个，然后接受这个。
我最初接受了 mridkash 的解决方案，因为对于我这样的初学者来说，更容易理解为什么问题首先存在，而我接受理解你的代码是大多数情况下的最佳解决方案在这种情况下，我不知道什么时候会完成绑定，因为我预计它会不断进行，而 mridkash 的解决方案更明确地指出，当任何事情发生时它会分离，即使它在那里被移除也是如此并替换为相同的元素。

【解决方案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>");
});

【讨论】：

@Travis Pessetto：虽然使用live() 解决了您的代码中的特定问题，但@mplungjan 确实拥有他的代码所在的最佳解决方案更简单、更清洁、更高效。
我正要发布这个。 “现场”的把戏就是这样，一个把戏。 @mplungjan 的方式更优雅。
@Travis Pessetto, @mplungjan：每个人都同意toggle 是更好的解决方案...您应该通过接受@mplungjan 的答案来解决这个问题。

【解决方案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>

【讨论】：

【解决方案4】：

您正在将点击事件绑定到一个尚不存在的元素...试试这个：

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

【讨论】：

我假设当内部 HTML 发生变化时，该元素的绑定也会被破坏，所以我对 showall 和 hideall 函数都这样做了。