Fatal编程技术网
  • javascript/
  • Javascript JQuery Mobile-版本冲突，radiobutton JS刷新

Javascript JQuery Mobile-版本冲突，radiobutton JS刷新

javascript jquery-mobile

Javascript JQuery Mobile-版本冲突，radiobutton JS刷新,javascript,jquery-mobile,radio-button,compatibility,Javascript,Jquery Mobile,Radio Button,Compatibility,我正在重新使用JQueryMobile进行开发，这对于开发移动应用程序原型来说是非常棒的，但我遇到了一个潜在的版本问题： 要么格式化工作正常，但js选中的单选按钮不刷新，要么格式化需要跳出窗口，然后相同的js会产生刷新。我正在处理dreamweaver CS6，并与js bin进行交叉检查 这是一个JQM格式正常的页面，但是缺少radiobutton自更新功能。 不确定选中状态是否已更新，但没有刷新 这是一个包含最新jqm的页面，它并没有显示jqm格式，在64位windows 7上，该页面也被

我正在重新使用JQueryMobile进行开发，这对于开发移动应用程序原型来说是非常棒的，但我遇到了一个潜在的版本问题： 要么格式化工作正常，但js选中的单选按钮不刷新，要么格式化需要跳出窗口，然后相同的js会产生刷新。我正在处理dreamweaver CS6，并与js bin进行交叉检查

这是一个JQM格式正常的页面，但是缺少radiobutton自更新功能。

不确定选中状态是否已更新，但没有刷新

这是一个包含最新jqm的页面，它并没有显示jqm格式，在64位windows 7上，该页面也被加载到chrome中是最新的

这是一个完全没有引用css的页面，onload函数可以正常工作。

我有一些问题。 1.如何实现radiobutton状态更改、刷新和保留JQM？ 2.您认为哪个版本的jqm是最佳的，或者——理想情况下——您如何使最新版本发挥作用？ 3.附带问题：推荐的最兼容的基于web的JSFIDLE等价物是什么？ 非常感谢

现在是切换到https的时候了：

下面是一个关于Plunker的工作示例：

我找到了JQM与body onload冲突的答案-这与JQM相对于的执行顺序有关。一种解决方法是用未包装的JS指令替换函数，或者由某些用户活动触发函数。剩下的问题是，哪一个版本是最通用的兼容和工作的jqm版本。我期待着答案。谢谢。请看这里：和这里： 
    <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>

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

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

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

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 */
  }
}