Javascript 如何防止jquery中单个事件处理程序的多次注册_Javascript_Jquery_Event Handling

Javascript 如何防止jquery中单个事件处理程序的多次注册

javascript jquery

Javascript 如何防止jquery中单个事件处理程序的多次注册,javascript,jquery,event-handling,Javascript,Jquery,Event Handling,我有一个显示搜索消息的框和一些最近消息的单选按钮。有用于滑动切换的链接选项当你点击这个链接时，它会显示一些输入字段、复选框和单选按钮。同时链接的文本更改为隐藏选项。如果单击该选项，它将隐藏所有输入和复选框选项当我重新调整整个页面时，它会正常工作，但当特定的框或部分重新调整时，框会隐藏，并且会立即隐藏。如果刷新该部分n框将持续切换的次数。我认为问题在于事件处理程序的注册。所以请给我一些解决方案代码： $(document).ready(function() { $(".SideBar-b

我有一个显示搜索消息的

框和一些最近消息的单选按钮。有用于滑动切换的链接选项

当你点击这个链接时，它会显示一些输入字段、复选框和单选按钮。同时链接的文本更改为隐藏选项。如果单击该选项，它将隐藏所有输入和复选框选项

当我重新调整整个页面时，它会正常工作，但当特定的框或部分重新调整时，框会隐藏，并且会立即隐藏。如果刷新该部分n框将持续切换的次数。我认为问题在于事件处理程序的注册。所以请给我一些解决方案

代码：

$(document).ready(function() {
  $(".SideBar-blockheader1").click(function() {
    e.preventDefault();
    $(".SideBar-blockcontent1").slideToggle("fast");
  });

  $(".SideBar-optionheader").click(function() {
    $(".SideBar-optioncontent").slideToggle("fast");
    $(this).text($(this).text() == $("#hideopt").attr('value') ?  $("#showopt").attr('value') : $("#hideopt").attr('value'));
  });

  $(".SideBar-optionheader").text($("#showopt").attr('value'));
  $(".SideBar-optioncontent").hide();
});

虽然您尚未提供代码，但我怀疑您正在使用.click（）。对于jQuery 1.7+，您应该在委托模式下使用

.on（）

（您绑定到的元素是一个祖先，而不是可单击的元素本身）或者

.delegate（）

（如果是jQ 1.7之前的版本）

例如：

$('someAncestor').on('click', 'a.specialLink', function(event) {
  event.preventDefault();
  // the rest of your code for the click handler
})

“some祖先”是任何有效的选择器，它是链接的祖先，在构建DOM后不会被破坏、重建或以其他方式操作。它不一定是直系祖先

[查看代码示例和注释后更新如下]

有一些事情正在发生。首先，

.on（）

只有在使用jQuery 1.7+时才起作用。接下来，

.on（）

可以通过几种不同的方式调用（我在这里写过：），您需要在委托祖先侦听器时调用它，而不仅仅是作为单击的替代。接下来，您没有为尝试的更新提供代码，只为原始代码提供代码；很难说尝试使用

.on（）

有什么“不起作用”。继续前进，我不确定这条线到底要做什么：

$(this).text($(this).text() == $("#hideopt")...etc...

我想不出为什么要尝试将jQuery对象视为变量。我不是说代码错了，我只是说我不明白。还有，我讨厌三元运算符。。。这也是我不明白的部分原因。我更喜欢可读的条件句

接下来，您将对“e”调用preventDefault（），但不会将“e”传递到函数中。您可能只是得到一个JavaScript错误，句号。（e未定义）

然后是

attr（“value”）

，我认为这应该是有效的。但是如果它确实是一个具有value属性的节点，为什么不使用

.val（）

最后，还有大量空间用于缓存对象。每当您看到一个对象被多次使用时，您都可以从缓存中获益（在不同的性能和易读性方面）。不过，我并没有用任何缓存来更新代码——这确实是另一个“如何才能最好地缓存我的对象？”的问题

无论如何。。。要解决这个问题，首先必须选择一个有效的祖先。这可以是在加载新数据过程中未被破坏的任何祖先。这可能是任何东西，但最接近的祖先是最好的。它可能是一个节包装器，但如果你真的很绝望，它可能是一个页面包装器，甚至是body标签。如果您绑定到文档，则会复制不推荐使用的

.live（）

函数，我绝对不建议使用该函数。我使用了一个占位符选择器，“

.section

”，但您需要找出页面上合适的祖先是什么

$(document).ready(function()
{
  $(".section").on("click", ".SideBar-blockheader1", function(e)
  {
    e.preventDefault(); // probably not necessary if there's no default click behaviour
    $(".SideBar-blockcontent1").slideToggle("fast");
  });

  $(".section").on("click", ".SideBar-optionheader", function(e)
  {
    e.preventDefault(); // probably not necessary if there's no default click behaviour
    $(".SideBar-optioncontent").slideToggle("fast");
    $(this).text($(this).text() == $("#hideopt").val() ?$("#showopt").val() : $("#hideopt").val());
  });

  $(".SideBar-optionheader").text($("#showopt").val());
  $(".SideBar-optioncontent").hide();
});