2

我的代码很简单。它可以在这个 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，但我很想更好地了解如何诊断和解决这些问题。为什么会发生这种情况，我该如何解决它以及如何更好地教育自己？

4

4 回答 4

4

第一个调试技巧：使用工具。现在大多数浏览器都包含调试工具，您可以使用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>

点击跨度：<span>

原来如此！奇怪......好吧，你为什么首先需要一个<span>？

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

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

于 2013-04-10T08:40:32.293 回答
1

你的#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>
于 2013-04-10T08:34:00.300 回答
0

即使其他答案也正确，也可能存在另一个问题，on click 事件处理程序注册发生在 dom 就绪之外。

尝试

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

演示：Plunker

于 2013-04-10T08:50:00.337 回答
0

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

 $('.btn-placeorder').click(function(){
   $("#tabs").tabs("option","active",2);
 });
于 2013-04-10T08:34:15.670 回答