javascript - JQuery UI 适用于 chrome 但不适用于 firefox

Question

我的代码很简单。它可以在 this jsFiddle 找到:

<div id="tabs">
<ul>
 <li><a href="#highlights">About</a></li>
 <li><a href="#fineprint">Fine Print</a></li>
 <li><a href="#location">Location</a></li>
</ul>
<div id="highlights">
  highlights
</div>
<div id="fineprint">
  FiNEPRINT
</div>
<div id="location">
  <ul>
    <li>
        <address>ADDRESS</address>
    </li>
    <li>
   MAP
    </li>
  </ul>

</div>

<button class="btn-placeorder"><span id="maplink">View map</span></button>

 <script>
 $(function(){
  $("#tabs").tabs();
 });
 $('#maplink').click(function(){
   $("#tabs").tabs("option","active",2);
 });
</script>

在 Firefox 上，您会注意到，即使在 fiddle 中，单击查看 map 按钮时选项卡也不会更改。

我用 javascript 的工作不多，但我很想更好地了解如何诊断和解决这些问题。为什么会发生这种情况，我该如何解决它以及如何更好地 self 教育？

Answer 1

第一个调试技巧:使用工具。现在大多数浏览器都包含可以使用 F12 调用的调试工具。在 Firefox 中，快捷方式是 Cmd+Opt+K 或 Ctrl+Shift+K 尽管我建议您打开附加组件管理器并安装 Firebug。

第二个提示:检查您的代码是否运行。控制台 API 是一个好的开始:

$('#maplink').click(function () {
    console.log("Button clicked");
    $("#tabs").tabs("option", "active", 2);
});

不会打印任何内容，因此不会调用您的事件。我们可以看到它没有直接附加到按钮上，而是附加到一个内部 <span> 上。 :

<button class="btn-placeorder"><span id="maplink">View map</span>
</button>

所以我们想知道:span 上的 onclick 事件是否有问题？

$("span").on("click", function(){
    console.log("click on span: %o", this);
});

未打印任何内容，因此显然存在问题。有没有可能是按钮捕捉到了onclick事件？

<button class="btn-placeorder"><span id="maplink">View map</span>
    </button><span>Test span</span>

click on span: <span>

原来如此!奇怪...嗯，你为什么需要 <span>首先？

$('.btn-placeorder').click(function () {
    console.log("Button clicked");
    $("#tabs").tabs("option", "active", 2);
});

有效!我们现在需要的只是一些清理工作，例如为 <button> 分配一个正确的 ID并摆脱多余的<span> .