Javascript 在chrome上工作的JQuery UI，而不是firefox

我的代码很简单。可在以下网址找到：

亮点
精细印刷


地址


地图

查看地图
$（函数（）{
$（“#制表符”）.tabs（）；
});
$（“#映射链接”）。单击（函数（）{
$（“选项卡”）。选项卡（“选项”、“活动”，2）；
});

在Firefox上，你会注意到，即使在小提琴中，当点击查看地图按钮时，标签也不会改变

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

您的

#maplink

选择器匹配内部

元素，而不是其父元素

试着写：

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

查看地图

而不是：

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

查看地图

用按钮的实际类别替换量程id，如下所示：

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

---

第一个调试提示：使用工具。现在大多数浏览器都包含了可以用F12调用的调试工具。在Firefox中，捷径是Cmd+Opt+K或Ctrl+Shift+K，不过我建议您打开插件管理器并安装Firebug

第二个提示：检查代码是否运行。控制台API是一个良好的开端：

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

未打印任何内容，因此未调用您的事件。我们可以看到它不是直接连接到按钮，而是连接到内部的

：

没有印刷，所以很明显有问题。按钮是否可能正在捕获onclick事件

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

---

它起作用了！我们现在所需要的只是一些清理，比如为

分配一个适当的ID，并去除冗余的

即使其他答案也正确，也可能存在另一个问题，即单击事件处理程序注册在dom就绪外部进行

试一试

---

演示：

我猜在chrome中，它也不起作用。发布一行代码，其中包括jquery库js文件和css文件+1，用于请求诊断建议。我希望我的回答能有所帮助。>“现在大多数浏览器都有调试工具，你可以用F12调用”…或者在Firefox中是cmd+opt+k/ctrl+shift+k.@RaphaelSchweikert-你说得对。我太习惯Firebug了，我甚至觉得Firefox捆绑自己的工具很烦人：）非常感谢。你解决了我的问题，但更重要的是教会了一个人如何钓鱼。祝你度过美好的一天。@lvaroG.Vicario你真的应该试试Firefox的工具，它们一直在不断改进。我发现自己越来越少地使用Firebug。此外，您还可以看到一个3D视图……您是否碰巧知道为什么单击事件会被

捕获，并且不会传输到内部

？@lvaro，事件通常会向上冒泡，而不是向下冒泡，但即使如此，

单击
事件确实应该起源于
元素，并向上冒泡到
。看起来像一个UI实现细节，我怀疑
捕获
mousedown
和
mouseup
事件，不管它们发生在哪个子体上，以便实现其“按下”状态。
$('#maplink').click(function () {
    console.log("Button clicked");
    $("#tabs").tabs("option", "active", 2);
});

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

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

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

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

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