jQuery 点击事件在 Chrome 中有效，在 Firefox 或 IE 中无效答案

【问题标题】：jQuery click event works in Chrome, not in Firefox or IEjQuery 点击事件在 Chrome 中有效，在 Firefox 或 IE 中无效
【发布时间】：2017-07-12 13:34:49
【问题描述】：

这个小函数在页面加载时设置一些 div 隐藏，然后在单击箭头图标时显示或隐藏它们。

这在 Chrome 中运行良好，但在 FF 和 IE 中，页面加载时所有内容都可见，单击图标无任何作用。

我是 jQuery 新手，已经阅读了一些其他问题，但看不到解决方案。

$(document).ready(function() {
  $(".each-panel").hide();
  $(".additional_comments").hide();
  $(".summaryArrowUp").hide();

  $(".summaryArrowRight").click(function(){
    $(".each-panel").slideDown("slow");
    $(".additional_comments").slideDown("slow");
    $(".summaryArrowRight").hide();
    $(".summaryArrowUp").show();
  });

  $(".summaryArrowUp").click(function(){
    $(".each-panel").slideUp("slow");
    $(".additional_comments").slideUp("slow");
    $(".summaryArrowRight").show();
    $(".summaryArrowUp").hide();
  });

这里是 HTML：

<div id="capSummaryContainer" class="infoBoxLine">
  <h3 class="buildSummary">Build Summary 
    <span><i class="fa fa-chevron-right summaryArrowRight" aria-hidden="true"></i>
      <i class="fa fa-chevron-up summaryArrowUp" aria-hidden="true"></i>
    </span>
  </h3>
  <div class="each-panel hidden">
    <div class="insider" id="capSummaryContainer_custom"></div>
  </div>
  <!-- Front panel contents -->
  <div class="each-panel">
    <h4 class="heading">Front Panel 
      <span>
        <i class="fa fa-eye" aria-hidden="true" onclick="selectTab(2);"></i>
        <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(2, 'Are you sure you want to remove all customization from the front of the cap?');"></i>
      </span>
    </h4>
    <div class="insider" id="capSummaryContainer_front">
      <div class="designname"></div>
    </div>
  </div>
  <!-- Left panel contents -->
  <div class="each-panel">
    <h4 class="heading">Left Panel
      <span>
        <i class="fa fa-eye" aria-hidden="true" onclick="selectTab(3);"></i>
        <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(3, 'Are you sure you want to remove all customization from the left side of the cap?');"></i>
      </span>
    </h4>
    <div class="insider" id="capSummaryContainer_left">
      <div class="designname"></div>
    </div>
  </div>

【问题讨论】：

控制台有错误吗？顺便说一句，你的 JavaScript 有语法错误。
没有足够的代码来重现问题。所有发布的看起来都在工作...但是 selectTab() 和 skiptomylootDelete() 未定义...因为没有发布。
下面的答案只在 ready 函数中添加了一个右括号}); 和一个右括号</div>...当我告诉重现没有问题时我也做了...
谢谢 - 我实际上能够通过最初使用 CSS 而不是 jQuery 隐藏我的 div 并将代码嵌套在另一个具有事件连接的函数中来使其在所有浏览器中运行良好 - 我认为document.ready 可能在不止一个地方，它让浏览器感到困惑。这是一个非常大且难以导航的项目的一部分，我没有意识到还有另一个 document.ready 函数。

标签： jquery html internet-explorer firefox click

【解决方案1】：

试试我的例子。我只是将图标添加为默认值，因为我没有时间附加 fontawesome。用 FF 和 IE 和 Chrome 测试。正确格式化后，我发现一些丢失的括号可能在您的主代码中，也可能不在。如果此示例有效，请在 FF 和 IE 中自行测试。

$(".each-panel").hide();
$(".additional_comments").hide();
$(".summaryArrowUp").hide();

$(".summaryArrowRight").click(function() {
  $(".each-panel").slideDown("slow");
  $(".additional_comments").slideDown("slow");
  $(".summaryArrowRight").hide();
  $(".summaryArrowUp").show();
});

$(".summaryArrowUp").click(function() {
  $(".each-panel").slideUp("slow");
  $(".additional_comments").slideUp("slow");
  $(".summaryArrowRight").show();
  $(".summaryArrowUp").hide();
});

i {
  color: blue;
  font-weight: bold;
  padding: 3px;
  background: #CCC;
}

i:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="capSummaryContainer" class="infoBoxLine">
  <h3 class="buildSummary">Build Summary
    <span>
      <i class="fa fa-chevron-right summaryArrowRight" aria-hidden="true">[>]</i>
      <i class="fa fa-chevron-up summaryArrowUp" aria-hidden="true">[^]</i>
    </span>
  </h3>
  
  <div class="each-panel hidden">
    <div class="insider" id="capSummaryContainer_custom"></div>
  </div>
  
  <!-- Front panel contents -->
  <div class="each-panel">
    <h4 class="heading">
      Front Panel
      <span>
        <i class="fa fa-eye" aria-hidden="true" onclick="selectTab(2)"></i>
        <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(2, 'Are you sure you want to remove all customization from the front of the cap?');"></i>
      </span>
    </h4>
    <div class="insider" id="capSummaryContainer_front">
      <div class="designname"></div>
    </div>
  </div>
  
  <!-- Left panel contents -->
  <div class="each-panel">
    <h4 class="heading">
      Left Panel
      <span>
        <i class="fa fa-eye" aria-hidden="true" onclick="selectTab(3);"></i>
        <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(3, 'Are you sure you want to remove all customization from the left side of the cap?');"></i>
      </span>
    </h4>
    <div class="insider" id="capSummaryContainer_left">
      <div class="designname"></div>
    </div>
  </div>
</div>

【讨论】：

如果您能解释一下您所做的更改会有所帮助...并且请缩进您的代码比这更好。
请阅读以上内容，我的代码是缩进的。打开代码编辑器，你会看到我使用了标准标签来指示缩进。

【解决方案2】：

$(document).ready(function() {
  $(".each-panel").hide();
  $(".additional_comments").hide();
  $(".summaryArrowUp").hide();

  $(".summaryArrowRight").click(function() {
    $(".each-panel").slideDown("slow");
    $(".additional_comments").slideDown("slow");
    $(".summaryArrowRight").hide();
    $(".summaryArrowUp").show();
  });

  $(".summaryArrowUp").click(function() {
    $(".each-panel").slideUp("slow");
    $(".additional_comments").slideUp("slow");
    $(".summaryArrowRight").show();
    $(".summaryArrowUp").hide();
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="capSummaryContainer" class="infoBoxLine">
  <h3 class="buildSummary">Build Summary <span><i class="fa fa-chevron-right summaryArrowRight" aria-hidden="true"></i>
    <i class="fa fa-chevron-up summaryArrowUp" aria-hidden="true"></i></span></h3>
  <div class="each-panel hidden">
    <div class="insider" id="capSummaryContainer_custom"></div>
  </div>
  <!-- Front panel contents -->
  <div class="each-panel">
    <h4 class="heading">Front Panel
      <span><i class="fa fa-eye" aria-hidden="true" onclick="selectTab(2);"></i>
        <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(2, 'Are you sure you want to remove all
                                                           customization from the front of the cap?');"></i></span></h4>
    <div class="insider" id="capSummaryContainer_front">
      <div class="designname"></div>
    </div>
  </div>
  <!-- Left panel contents -->
  <div class="each-panel">
    <h4 class="heading">Left Panel <span>
      <i class="fa fa-eye" aria-hidden="true" onclick="selectTab(3);"></i>
      <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(3, 'Are you sure you want to remove all customization from the left side of the cap?');"></i></span>
    </h4>
    <div class="insider" id="capSummaryContainer_left">
      <div class="designname"></div>
    </div>
  </div>
</div>

您似乎没有正确完成标签，this 适用于所有浏览器

【讨论】：

【解决方案3】：

您可以尝试使用 .on click() 事件而不是 .click()。这是一个例子，

$(document).on('click', '.summaryArrowRight', function () 
{
// your function here
});

希望它有效。

【讨论】：