Question

我有一个复杂的离线网络应用，可以通过克隆母版页来生成动态网页。在这个页面上，我有一个带有单选按钮的弹出窗口。当我点击那些收音机时，我得到了＆＃34;无法在初始化之前调用checkboxradio上的方法＆＃34;错误。

我将代码缩减到这个测试用例： http://jsbin.com/lanulu/1/

如果您转到第2页（母版页）或第3页（克隆页面），然后单击＆＃34;单击此处按钮，您可以单击电台或复选框。该复选框运行良好，不会产生任何错误。但收音机会产生错误。

你删除克隆页面的代码并转到第2页，一切正常。

过去克隆页面我遇到了很多这些问题，但我总是通过让所有id唯一来解决它。但这次还不够......

有任何线索吗？

由于

html：

<div data-role="page" id="page1">
    <div data-role="header">
      <h1>Page 1</h1>
    </div><!-- /header -->

    <div class="ui-content">
      <ul>
     <li> <a href="#page2">Page2</a>
      <li><a href="#page3">Page3</a>
      </ul> 
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header">
      <h1>Page 2</h1>
    </div>

    <div class="ui-content">
      <a href="#page1">Page 1</a>
      <a data-role="button" class="foo">Click here</a>
    </div>

    <div data-role="popup" id="popup_cs"  class="popup_cs">
        <div class="ui-content" role="main">
            <fieldset data-role="controlgroup">
                <input type="radio" name="cs" id="cs-box" class="box" value="box">
                <label for="cs-box">foo</label>
                <input type="checkbox" name="cs" id="cs-tg" class="tg" value="tg">
                <label for="cs-tg">bar</label>
            </fieldset>
        </div>
    </div>
</div>

Javascript：

$(function() {
  $("#page2")
     .clone()
     .appendTo("body")
     .attr("id","page3")
     .attr("data-url","page3");
  $("#page3 h1").text("Page 3");
  $("#page3 .popup_cs").attr("id", "popup_cs2");
  $("#page2 .popup_cs label").attr("for", function(i, val) { return val + "-3";});
  $("#page3 .popup_cs input").attr("id", function(i, val) { return val + "-3";});
});


$(document).on("click", ".foo", function() {
    var popup = $( "body" ).pagecontainer( "getActivePage" ).find(".popup_cs");
    popup.popup("open", {positionTo: $(this)});
});

Answer 1

DOM中有两个单选按钮，具有相同的name，这意味着它们彼此连接。当您选择/选中一个时，jQM取消选择其他一个，然后调用.checkboxradio("refresh")。在创建或初始化的元素上调用 refresh 方法时，会出现错误：

在初始化之前无法调用checkboxradio上的方法;试图调用方法'刷新'

解决方案是更改克隆的单选按钮的name属性以及复选框。每个组都应该有一个唯一的name，因为所有元素都在DOM中同时存在。

$("#page3 .popup_cs input")
    .attr({
    id: function (i, val) {
        return val + "-3";
    },
    name: function (i, val) {
        return val + "-3";
    }
});

<强> Demo

克隆时弹出窗口内的checkboxradio错误

1 个答案: