JQuery用户界面工作在Chrome而不是Firefox

JQuery用户界面工作在Chrome而不是Firefox

本文介绍了JQuery用户界面工作在Chrome而不是Firefox的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的代码很简单。它可以在找到:

 < 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很多,但我很想得到更好的了解如何诊断和解决这些问题。为什么会发生这种情况,我该如何解决,怎样才能更好地教育自己?

解决方案

首先调试提示:使用工具。现在的大多数浏览器都包含可以用调用的调试工具。在Firefox中,快捷键是或,不过我建议您打开加载项管理器并安装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>

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 . In Firefox, the short-cut is or 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>

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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 18:37