JQuery Mobile - 版本冲突，单选按钮 JS 刷新

Question

我正在重新使用 JQueryMobile 进行开发，这证明了对移动应用程序的原型设计非常棒，但是我遇到了一个潜在的版本问题：格式工作正常但 js 检查的单选按钮不刷新，或者格式需要 go的 window 然后同一个 JS 确实设法产生刷新。我正在研究 Dreamweaver CS6 并与 js-bin 进行交叉检查。

这是具有有效 JQM 格式的页面，但缺少单选按钮自我更新功能。 http://jsfiddle.net/tearex/bh9szuer/

    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body ONLOAD="heja()"> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
         <input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
         <label for="WTEDY_0">Cat</label>

         <input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2"   />
         <label for="WTEDY_1">Dog</label>
</fieldset>
    </div><!-- /content -->

</div><!-- /page -->

</body>

<script>
function heja()
{

document.getElementById("WTEDY_0").checked = true;


        $("WTEDY_0").checkboxradio("refresh");

}
</script>

不确定检查的状态是否已更新但没有刷新。

这是一个带有最新 jqm 的页面 - 它根本没有显示 jqm 格式（顺便说一下，页面也被加载到 chrome 中 - 最新的，在 windows 7 64 位上） http ://jsfiddle.net/tearex/bh9szuer/2/

    <head> 
    <title>My Page</title> 

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body ONLOAD="heja()"> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
         <input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
         <label for="WTEDY_0">Cat</label>

         <input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2"   />
         <label for="WTEDY_1">Dog</label>
</fieldset>
    </div><!-- /content -->

</div><!-- /page -->

</body>

<script>
function heja()
{

document.getElementById("WTEDY_0").checked = true;


        $("WTEDY_0").checkboxradio("refresh");

}
</script>

这是完全没有提及 css 的页面，并且加载 function 工作正常。 http://jsfiddle.net/tearex/y4a369ps/1/

    <head> 
    <title>My Page</title> 

  <meta name="viewport" content="width=device-width, initial-scale=1">

</head> 
<body ONLOAD="heja()"> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
         <input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
         <label for="WTEDY_0">Cat</label>

         <input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2"   />
         <label for="WTEDY_1">Dog</label>
</fieldset>
    </div><!-- /content -->

</div><!-- /page -->

</body>
<script>
function heja()
{

document.getElementById("WTEDY_0").checked = true;


        $("WTEDY_0").checkboxradio("refresh");

}
</script>

我有一些问题。 1、JQM如何实现单选按钮状态变化和刷新保留？ 2. 你认为哪个版本的 jqm 是最佳的，或者——理想情况下——你如何使最新的版本工作？ 3. 附带问题推荐的最兼容的基于 Web 的 jsfiddle 等效项是什么？ 非常感谢。

Answer 1

是时候切换到https 了：

<!-- JQM theme shall be loaded before structure -->
<link rel="stylesheet" href="css/my-custom-theme.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/my-custom-styles.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  $(document).on("mobileinit", function () {
    /* my custom settings */
  });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
<script src="js/my-custom-functions.js">

关于刷新，也请不要忘记 jQuery 需要 CSS 样式的选择器：

function heja() {
  var id = 'WTEDY_0', el = document.getElementById(id);
  el.checked = true; 
  $('#' + id).prop('checked', true); /* The jQuery way */
  var isInstance = $.data(el, 'mobile-checkboxradio');
  if(isInstance) {
    $('#' + id).checkboxradio('refresh'); /* The JQM Widgets way */
  }
}

这是 Plunker 上的一个工作示例： https://plnkr.co/edit/yLEB2XFlM8H4cqsZ?open=lib%2Fscript.js

JQuery Mobile - 版本冲突，单选按钮 JS 刷新

问题描述

1 个解决方案

解决方案1
1 2020-06-15 16:16:44

JQuery Mobile - 版本冲突，单选按钮 JS 刷新

问题描述

1 个解决方案

解决方案1 1 2020-06-15 16:16:44

解决方案1
1 2020-06-15 16:16:44