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上你会注意到，即使在小提琴中，单击视图贴图按钮时标签也不会改变。

我不使用javascript，但我希望更好地了解如何诊断和解决这些问题。为什么会发生这种情况，我该如何解决呢？如何才能更好地教育自己？

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>

所以我们想知道：跨度上的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>

点击范围：<span>

这就是它！很奇怪......那么，为什么你首先需要一个<span>？

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

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

Answer 2

您的#maplink选择器与您的内部<span>元素匹配，而非其<button>父元素。

尝试写作：

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

而不是：

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

Answer 3

将span的id替换为按钮的实际类，如下所示：

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

Answer 4

即使其他答案也正确，可能还有另一个问题，点击事件处理程序注册正在dom准备就绪之外。

尝试

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

演示：Plunker

JQuery UI工作在chrome但不是firefox

4 个答案: