Jquery Mobile 错误动态更改选项卡，不会使选项卡处于活动状态答案

【问题标题】：Jquery Mobile error dynamically changing Tab, doesn't make tab activeJquery Mobile 错误动态更改选项卡，不会使选项卡处于活动状态
【发布时间】：2016-05-28 05:42:36
【问题描述】：

我在弹出窗口中有 3 个选项卡。根据单击的超链接，我希望它可以激活特定的选项卡。

删除所有非必要代码后，如果超链接应用了“ui-btn”类，它似乎会失败。如果链接未设置样式，则它可以正常工作。 它会选择正确的选项卡，但不会激活/突出显示导航栏链接。

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

请看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;
}

【问题讨论】：

标签： jquery jquery-mobile jquery-mobile-popup jquery-mobile-navbar

【解决方案1】：

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

	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 的类和一个自定义数据 attr data-dayorm=""。然后我们在 dayformButton 类上绑定一个 click 事件，如果该事件发生，我们查看哪个按钮被点击（使用 data-dayform 属性），然后我们将此属性保存到一个 var 中，以使其可用于弹出事件侦听器。

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

在弹出窗口计算将出现的坐标之前触发

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

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

当弹出窗口完全关闭时触发

在弹出窗口关闭后，我们使用此事件重置表单。这样，我们会从您的 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 删除所有其他ui-btn-active。我会仔细查看答案的其余部分，并尝试改进 代码气味 :)
我接受你所说的使用onclick=。在实际脚本中，只有1个按钮，参数是通过php动态添加的。这种情况出现在 OO、CLO 和 DO = 'on' 的情况下。或任何组合。 editDayform('".$day_num."', '".mysqli_real_escape_string($dbc, $dayarray['OO'])."', '".mysqli_real_escape_string($dbc, $dayarray['CLO'])."', '".mysqli_real_escape_string($dbc, $dayarray['DO'])."...
我已经更新了link，并且在 cmets 中它也显示了实际的 php 代码。那里有 15 个参数，您是否建议尝试将所有这些参数放入数据日表单中？非常感谢
在添加按钮的那一刻，您已经知道每个选项。所以没有必要将所有这些选项传递给按钮。将所有这些选项保存在一个对象或数组中，并向您的页面添加一个简单的按钮。如果用户单击此按钮，您将获取所有这些已保存的选项并将它们填充到弹出窗口中。