JQuery UI working on chrome but not firefox

问题

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?

回答1:

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

回答2:

Your #maplink selector matches your inner <span> element, not its <button> parent.

Try writing:

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

Instead of:

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

回答3:

Replace the id of the span with the actual class of the button, like this:

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

回答4:

Even if other answers are also correct, there could be another problem, the on click event handler registration is happening outside dom ready.

Try

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

Demo: Plunker

来源：https://stackoverflow.com/questions/15920655/jquery-ui-working-on-chrome-but-not-firefox

标签

javascript

jquery

jquery-ui

firefox