克隆时弹出错误内的 checkboxradio

Posted 2023-05-09

【中文标题】克隆时弹出错误内的 checkboxradio

【英文标题】：checkboxradio inside popup error when cloned

【发布时间】：2015-02-11 14:17:38

【问题描述】：

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

【参考方案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

【讨论】：

我在这上面花了 3 个小时却没有找到它，它太简单了！！非常感谢奥马尔！！

@Matthieu 不客气 :) 如果您仍然希望两个单选按钮具有相同的 name，只需调用 .checkboxradio() 手动初始化克隆的一个。