JQuery用户界面工作在Chrome而不是Firefox [英] JQuery UI working on chrome but not firefox

问题描述

我的代码很简单。它可以在这个jsFiddle 找到：

 < div id =tabs> 
< ul> 
< li>< a href =＃highlights>关于< / a>< / li> 
< li>< a href =＃fineprint>精美打印< / a>< / li> 
< li>< a href =＃location>位置< / a>< / li> 
< / ul> 
< div id =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>查看地图< / span>< / button> 
 
< script> 
 $（function（）{
 $（＃tabs）。tabs（）; 
}）; 
 $（'＃maplink'）。click（function（）{
 $（＃tabs）。tabs（option，active，2）; 
}）; 
< / script> 
  

在Firefox上，您会注意到，即使在小提琴选项卡也不会在视图贴图按钮点击。

我不使用JavaScript很多，但我很想得到更好的了解如何诊断和解决这些问题。为什么会发生这种情况，我该如何解决，怎样才能更好地教育自己？

解决方案

首先调试提示：使用工具。现在的大多数浏览器都包含可以用 F12 调用的调试工具。在Firefox中，快捷键是 Cmd + Opt + K 或 Ctrl + Shift + K ，不过我建议您打开加载项管理器并安装Firebug。 >

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

$ $ p $ $（'＃maplink'）。click（function（）{
console.log（Button clicked）;
$（＃tabs）。tabs（option，active，2）;
}）;

没有打印出来，所以你的事件没有被调用。我们可以看到它不是直接连接到按钮，而是连接到内部< span> ：

 < button class =btn-placeorder>< span id =maplink>查看地图< / span> 
< / button> 
  

所以我们想知道：跨度上的onclick事件有什么问题吗？ （click，function（）{
console.log（点击跨度：％o）b

  ，this）; 
}）; 
  

没有打印，所以显然有一个问题。

 < button class =btn-placeorder><>这个按钮可能会触发onclick事件吗？ span id =maplink>查看地图< / span> 
< / button>< span>测试范围< / span> 
  

点击跨度：< span>

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

console.log（按钮点击）;
$（＃tabs）。tabs （option，active，2）;
}）;

有用！我们现在需要的只是一些清理，例如为<按钮> 分配一个合适的ID，并去除多余的< span> / code>。

My code is simple. It can be found at 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>

On Firefox you will notice, even in the fiddle the tabs don't change when the view map button is clicked.

I don't work with javascript much but I'd love to gain a better understanding of how to diagnose and solve these problems. Why is this happening, how can I solve it and how can I better educate myself?

解决方案

First debugging tip: use tools. Most browser's nowadays include debugging tools you can call with F12. In Firefox, the short-cut is Cmd+Opt+K or Ctrl+Shift+K though I recommend you open the add-on manager and install Firebug.

Second tip: check whether your code runs. The console API is a good start:

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

Nothing gets printed so your event is not being called. We can see it isn't attached directly to the button but to an inner <span>:

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

So we wonder: is there something wrong with onclick events on spans?

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

Nothing printed, so there's apparently an issue. It is possible that the button is catching the onclick event?

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

click on span: <span>

So that it's! Weird... Well, why do you need a <span> in the first place?

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

It works! All we need now is some cleanup, such as assigning a proper ID to the <button> and getting rid of the redundant <span>.

这篇关于JQuery用户界面工作在Chrome而不是Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！