Form Broken Using JQuery UI tabs in Chrome Only

问题

I have looked into many similar problems and solutions but none that have fixed this problem. This form works in Firefox but not Chrome. I would like to understand what Firefox is doing that Chrome is not and fix this page so it works in all browsers.

The form seems to become unusable once it is placed inside JQuery UI tabs but only in Chrome.

<form method="post" action="/data-page/" id="enter_exercise" >      
  <div id="tabs_ajax">
    <ul>
      <li><a href="#tabs-1">General Info</a></li>
      <li><a href="#tabs-2">Heart Rate</a></li>
      <li><a href="#tabs-3">Exercise</a></li>
    </ul>
    <div id="tabs-1" style="padding:0;" >
      Workout Title:<input type='text' name='title' value="" />
    </div>  <!-- END tab-1 -->
    <div id="tabs-2" style="padding:0;" >
      Average Heart Rate:<input type='text' name='avgHR' value="" />
    </div>  <!-- END tab-2 -->
    <div id="tabs-3" style="padding:0;" >
      Run Miles:<input type='text' name='miles' value="" />
    </div>  <!-- END tab-3 -->
  </div>
</form>

The javascript (which is posted at the bottom of the page)

<script>
  $j = jQuery.noConflict();
  $j(document).ready(function(){        
    $j( "#tabs_ajax" ).tabs({
    });
  });
</script>

This page is for exercise input on a wordpress blog and is initiated as a fancybox popup. I use include("../../../wp-load.php"); to allow this popup to access the wordpress functions. I also use wp_enqueue_scripts("jquery"); and wp_enqueue_script('jquery-ui-tabs');

If I create a plain form on this popup, it works, but when I place the form within the <div id="tabs_ajax">content, it does not allow me to enter form data in Chrome. It works in Firefox but Chrome is unresponsive, including the submit button.

来源：https://stackoverflow.com/questions/16002880/form-broken-using-jquery-ui-tabs-in-chrome-only

标签

javascript

jquery

jquery-ui

fancybox