克隆时弹出错误内的 checkboxradio

Question

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

我将我的代码简化为这个测试用例： http://jsbin.com/lanulu/1/

如果您转到第 2 页（母版页）或第 3 页（克隆页），然后单击“单击此处”按钮，您可以单击单选框或复选框。复选框运行良好，不会产生错误。但是收音机会产生错误。

如果您删除克隆页面的代码并转到第 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