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

其他开发 IT屋
问 题

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>.

本文地址:IT屋 » 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>。


本文地址:IT屋 » JQuery用户界面工作在Chrome而不是Firefox