Jquery Mobile错误动态更改Tab，不会激活标签

Question

我在弹出窗口中有3个标签。根据点击的超链接，我希望它能够激活特定标签。

删除了所有非必要代码后，如果超链接有一个＆u-btn＆＃39;它就会失败。适用于它的类。如果链接未被设置，那么它可以正常工作。 选择正确的标签，但不会使导航栏链接处于活动状态/突出显示。

有人能够对此有所了解吗？或者简单的解决方法。

请参阅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-mobile按钮.ui-btn，jquery-mboile将从页面上的所有其他按钮中删除.ui-btn-active并突出显示单击的按钮。这需要一些时间。但是你正在触发“点击”＃39;您的标签上的事件会立即在jquery-mobile完成之前删除所有.ui-btn-active 如果您延迟$('#CC_OO_tab_link').trigger('click');并且1毫秒已足够，它将起作用。请参阅代码段

＆＃13;

＆＃13;

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

＆＃13;

<!-- 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'

＆＃13;

＆＃13;

＆＃13;

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

首先：链接上的所有onclick()。您应该删除它们，而应将事件绑定到按钮上 我在按钮中添加了一个名为.dayformButton的类和一个自定义数据attr data-dayorm =＆＃34;＆＃34;。 然后我们在类dayformButton上绑定一个click事件，如果发生这个事件，我们查看单击了哪个按钮（使用data-dayform attr。）然后我们将这个attr保存到var中，使其可用于弹出事件监听器。

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

  

在弹出窗口计算出现的坐标

之前触发

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

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

  

弹出窗口完全关闭时触发

我们使用此事件在弹出窗口关闭后重置窗体。这样我们就会从您的HTML中删除最后一个onclick。

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

＆＃13;

＆＃13;

	 // 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");
	  }


	});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;