jquery - jQuery单击事件在多个屏幕上不起作用

Question

我正在使用 jQuery 1.4.2。使用 CSS 选择器“span.accordionOn”，我正在处理一个点击事件。在第一个屏幕上，它工作正常。当我导航到下一个屏幕时，函数没有被调用。

jQuery 处理程序如下所示。我将它们保存在一个 js 文件中，并为每个页面加载加载 js 文件。

 $("span.accordionOn").click(function(event){
    $(this).parents(".toggleOuterCustom");
    $(this).parents(".toggleOuterCustom").find(".lHeight").toggleClass('lHeighttranslate');
    return false;
  });




// toggle link icon
  $('span.accordionOn').click(function(){
    $(this).toggleClass('accordionOff');
  });

Answer 1

如果没有看到更多代码，很难找到确切的问题，但这里有一个猜测：

 $(document).on("click", "span.accordionOn", function(event){
    $(this).toggleClass('accordionOff'); //I merged the 2 functions
    $(this).parents(".toggleOuterCustom");
    $(this).parents(".toggleOuterCustom").find(".lHeight").toggleClass('lHeighttranslate');
    return false;
  });

试试上面的代码。如果这有效，那么问题如下：

• 您将事件处理程序绑定到span.accordionOn文档中当前的所有元素
• 但是，如果您在此之后span.accordionOn添加新元素，则事件将不会绑定到它们
• 该on事件将适用于文档中的所有当前和未来span.accordionOn项目，从而解决了这个问题

Answer 2

我发现了这个问题。是的，你是对的，当我尝试绑定时元素不存在。

然而在 jQuery 1.4.2 中，'on()' 不存在并且使用了'live'。这是代码。

  $("span.accordionOn").live('click',function(event){
    $(this).parents(".toggleOuterCustom");
    $(this).parents(".toggleOuterCustom").find(".lHeight").toggleClass('lHeighttranslate');
    return false;
  });