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

Question

I am getting back to developing with JQueryMobile, which proves fabulous for prototyping mobile apps, but there is a potential version issue I have bumped into: either the formatting works fine but js-checked radiobuttons do not refresh, or the formatting needs to go out of the window and then the same JS does manage to produce the refresh.I am working on dreamweaver CS6 and cross-checking with js-bin.我正在重新使用 JQueryMobile 进行开发，这证明了对移动应用程序的原型设计非常棒，但是我遇到了一个潜在的版本问题：格式工作正常但 js 检查的单选按钮不刷新，或者格式需要 go的 window 然后同一个 JS 确实设法产生刷新。我正在研究 Dreamweaver CS6 并与 js-bin 进行交叉检查。

Here is the page with working JQM formatting, but the lack of radiobutton self-update functionality.这是具有有效 JQM 格式的页面，但缺少单选按钮自我更新功能。 http://jsfiddle.net/tearex/bh9szuer/ 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>

Not sure if the checked status is updated but there is no refresh.不确定检查的状态是否已更新但没有刷新。

Here is a page with the most recent jqm - and it is not showing jqm formatting at all (the way, this is the case with the page being loaded into chrome, too - up-to-date, on windows 7 64 bit) http://jsfiddle.net/tearex/bh9szuer/2/这是一个带有最新 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>

And here is the page making no reference to css at all, and the onload function works properly.这是完全没有提及 css 的页面，并且加载 function 工作正常。 http://jsfiddle.net/tearex/y4a369ps/1/ 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>

I have some questions.我有一些问题。 1. How to achieve the radiobutton status change and refresh and retain JQM? 1、JQM如何实现单选按钮状态变化和刷新保留？ 2. Which version of jqm do you find optimal, or - ideally - how do you make the latest one work? 2. 你认为哪个版本的 jqm 是最佳的，或者——理想情况下——你如何使最新的版本工作？ 3. Side question what is the recommended most compatible web-based jsfiddle equivalent? 3. 附带问题推荐的最兼容的基于 Web 的 jsfiddle 等效项是什么？ Thanks a lot.非常感谢。

Answer 1

It is time to switch to https :是时候切换到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">

Regarding the refresh, please also don't forget that jQuery need the CSS-style selector:关于刷新，也请不要忘记 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 */
  }
}

Here is a working example on Plunker: https://plnkr.co/edit/yLEB2XFlM8H4cqsZ?open=lib%2Fscript.js这是 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