Jquery 动态更改选项卡的移动错误，不会使选项卡处于活动状态

Question

我在弹出窗口中有 3 个选项卡。根据单击哪个 hyperlink，我希望它能够激活特定的选项卡。

删除了所有非必要代码后，如果 hyperlink 应用了 'ui-btn' class，它似乎会失败。如果 link 没有设置样式，那么它可以正常工作。 它选择了正确的选项卡，但没有生成导航栏 link active/highlighted。

有人能解释一下吗？或者一个简单的解决方法。

请参阅JSFiddle Demo

HTML

<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">

<main class="ui-content">
<form action="" method="post" id="CC_dayform" data-ajax="false">

<div data-role="tabs" id="tabs">
  <div data-role="navbar">Type:
    <ul>
      <li><a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a></li>
      <li><a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a></li>
      <li><a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a></li>
    </ul>
  </div>

  <div id="CC_OO_tab">
        <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
                <input type="checkbox" name="OO_req" id="CC_OO_req" />
                <label for="CC_OO_req">OO</label>
            </fieldset>
        </div>
    </div>

  <div id="CC_CLO_tab">
        <div class="ui-field-contain">

            <fieldset data-role="controlgroup">
            <input type="checkbox" name="CLO_req" id="CC_CLO_req" />
            <label for="CC_CLO_req">CLO</label>
            </fieldset>
        </div>

    </div>
    <div id="CC_DO_tab">
        <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
                <input type="checkbox" name="DO_req" id="CC_DO_req" />
                <label for="CC_DO_req">DO</label>
            </fieldset>
        </div>
</div>

<fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
<button type="submit" form="CC_dayform">Save</button>
<a href="#" data-rel="back" onclick="document.getElementById('CC_dayform').reset();" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
</fieldset>

</form>
</main>
</div>



These don't work...
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" class="ui-btn ui-btn-a ui-btn-inline">OO chosen</a> 
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');" class="ui-btn ui-btn-a ui-btn-inline">CLO chosen</a> 
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');" class="ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>
As they're 'ui-btn'
<br />
These work--><a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" >OO chosen</a> 
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');">CLO chosen</a> 
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');">DO Chosen</a> as they have no 'ui-btn'

Jquery

function editDayform(day, OO, CLO, DO) {
  if (OO == 'on') {
    $('#CC_OO_tab_link').trigger('click');
  } else if (CLO == 'on') {
    $('#CC_CLO_tab_link').trigger('click');
  } else if (DO == 'on') {
    $('#CC_DO_tab_link').trigger('click');
  }
  if (OO == 'on') {
    $('#CC_OO_req').prop('checked', true).checkboxradio('refresh');
  }
  if (CLO == 'on') {
    $('#CC_CLO_req').prop('checked', true).checkboxradio('refresh');
  }
  if (DO == 'on') {
    $('#CC_DO_req').prop('checked', true).checkboxradio('refresh');
  }
  return true;
}

Answer 1

首先解决你的问题。
我不确定，幕后到底发生了什么。但是，如果您单击 jquery-移动按钮 .ui-btn，jquery-mboile 将从页面上的所有其他按钮中删除 .ui-btn-active 并突出显示被单击的按钮。这需要一些时间。但是您在 jquery-mobile 完成删除所有 .ui-btn-active.
之前立即触发选项卡上的 'clicked' 事件如果你延迟 $('#CC_OO_tab_link').trigger('click'); 并且 1 毫秒已经足够了，它就会起作用。查看代码片段

 function editDayform(day, OO, CLO, DO) {
   if (OO == 'on') {

     setTimeout(function() {
       $('#CC_OO_tab_link').trigger('click');
     }, 1);

   } else if (CLO == 'on') {
     setTimeout(function() {
       $('#CC_CLO_tab_link').trigger('click');
     }, 1);


   } else if (DO == 'on') {
        setTimeout(function() {
       $('#CC_DO_tab_link').trigger('click');
     }, 1);
   }
   if (OO == 'on') {
     $('#CC_OO_req').prop('checked', true).checkboxradio('refresh');
   }
   if (CLO == 'on') {
     $('#CC_CLO_req').prop('checked', true).checkboxradio('refresh');
   }
   if (DO == 'on') {
     $('#CC_DO_req').prop('checked', true).checkboxradio('refresh');
   }
   return true;
 }

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">

  <main class="ui-content">
    <form action="" method="post" id="CC_dayform" data-ajax="false">

      <div data-role="tabs" id="tabs">
        <div data-role="navbar">
          Type:
          <ul>
            <li>
              <a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a>
            </li>
            <li>
              <a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a>
            </li>
            <li>
              <a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a>
            </li>
          </ul>
        </div>

        <div id="CC_OO_tab">
          <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
              <input type="checkbox" name="OO_req" id="CC_OO_req" />
              <label for="CC_OO_req">OO</label>
            </fieldset>
          </div>
        </div>

        <div id="CC_CLO_tab">
          <div class="ui-field-contain">

            <fieldset data-role="controlgroup">
              <input type="checkbox" name="CLO_req" id="CC_CLO_req" />
              <label for="CC_CLO_req">CLO</label>
            </fieldset>
          </div>

        </div>
        <div id="CC_DO_tab">
          <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
              <input type="checkbox" name="DO_req" id="CC_DO_req" />
              <label for="CC_DO_req">DO</label>
            </fieldset>
          </div>
        </div>

        <fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
          <button type="submit" form="CC_dayform">
            Save
          </button>
          <a href="#" data-rel="back" onclick="document.getElementById('CC_dayform').reset();" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
        </fieldset>

    </form>
  </main>
  </div>

  These don't work...
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" class="ui-btn ui-btn-a ui-btn-inline">OO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');" class="ui-btn ui-btn-a ui-btn-inline">CLO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');" class="ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>
  As they're 'ui-btn'
  <br />These work--><a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');">OO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');">CLO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');">DO Chosen</a> as they have no 'ui-btn'

但是你的代码看起来很奇怪，里面有很多代码味道。

首先：您链接上的所有 onclick()。您应该删除它们，而应该将事件绑定到按钮。
我添加了名为 .dayformButton 的 class 按钮和自定义数据属性 data-dayorm=""。然后我们在 class dayformButton 上绑定一个点击事件，如果这个事件发生，我们看看哪个按钮被点击了（带有 data-dayform 属性。）然后我们将这个属性保存到一个 var 中以供弹出事件监听器。

JQuery-mobile 为所有小部件提供了很多不同的事件。在这种情况下，我们可以从弹出窗口中获取事件。我们绑定的第一个事件是 beforeposition。

Triggered before a popup computes the coordinates where it will appear

在屏幕上显示弹出窗口之前，我们触发右侧选项卡上的点击事件并选中右侧的复选框。您可以将 beforeposition 更改为 afteropen，您会看到复选框和选项卡在弹出窗口打开后立即被激活。

最后一步，我们在弹出窗口关闭时绑定一个事件。 jquery-移动事件afterclose

Triggered when a popup has completely closed

我们使用此事件在弹出窗口关闭后重置表单。这样我们就可以从您的 html.

中删除最后一个 onclick

您的 editDayform 函数看起来也很奇怪。你在重复自己。你在做同样的事情 3 次，只是 ID 不同。更简单的方法是将 id 更改为传递的值。这样你就可以摆脱所有这些 if 和 else 了。

  // Set a global var
 var dayform = null;

  // Bind a Click Event
 $(".dayformButton").on('click', function() {
   // Which Button is clicked and set the global Var to this value
   dayform = $(this).data('dayform');
   console.log("Clicked: " + dayform);
 });

  // Bind Events to the popup
 $("#CC_dayformPopup").popup({
   beforeposition: function(event, ui) {
     // Select the matching tab and check the checkbox
     $('#CC_' + dayform + '_req').prop('checked', true).checkboxradio('refresh');
     $('#CC_' + dayform + '_tab_link').trigger('click');
   },

   afterclose: function(event, ui) {
     console.log("Popup closed");

     // Reset the form when the popup is closed
     $('#CC_dayform').trigger("reset");
   }


 });

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">

  <main class="ui-content">
    <form action="" method="post" id="CC_dayform" data-ajax="false">

      <div data-role="tabs" id="tabs">
        <div data-role="navbar">
          Type:
          <ul>
            <li>
              <a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a>
            </li>
            <li>
              <a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a>
            </li>
            <li>
              <a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a>
            </li>
          </ul>
        </div>

        <div id="CC_OO_tab">
          <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
              <input type="checkbox" name="OO_req" id="CC_OO_req" />
              <label for="CC_OO_req">OO</label>
            </fieldset>
          </div>
        </div>

        <div id="CC_CLO_tab">
          <div class="ui-field-contain">

            <fieldset data-role="controlgroup">
              <input type="checkbox" name="CLO_req" id="CC_CLO_req" />
              <label for="CC_CLO_req">CLO</label>
            </fieldset>
          </div>

        </div>
        <div id="CC_DO_tab">
          <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
              <input type="checkbox" name="DO_req" id="CC_DO_req" />
              <label for="CC_DO_req">DO</label>
            </fieldset>
          </div>
        </div>

        <fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
          <button type="submit" form="CC_dayform">
            Save
          </button>
          <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
        </fieldset>

    </form>
  </main>
  </div>

  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" data-dayform="OO" class="dayformButton ui-btn ui-btn-a ui-btn-inline">OO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" data-dayform="CLO" class="dayformButton ui-btn ui-btn-a ui-btn-inline">CLO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" data-dayform="DO" class="dayformButton ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>

Jquery 动态更改选项卡的移动错误，不会使选项卡处于活动状态

Jquery Mobile error dynamically changing Tab, doesn't make tab active

jquery

jquery-mobile

jquery-mobile-popup

jquery-mobile-navbar