问题描述
我的代码很简单。它可以在找到: < 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>
?
$(#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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!