复选框收音机中的刷新方法不起作用

Question

我有一个单选按钮列表，当单击添加按钮时，在单选按钮中添加新项目，但刷新方法不起作用并给我错误：

未捕获的错误：无法在初始化之前调用 checkboxradio 上的方法；试图调用方法“刷新”

at Function.error (VM80 jquery-1.12.4.js:253)
at HTMLInputElement.<anonymous> (VM81 jquery-ui.js:246)
at Function.each (VM80 jquery-1.12.4.js:370)
at jQuery.fn.init.each (VM80 jquery-1.12.4.js:137)
at jQuery.fn.init.$.fn.<computed> [as checkboxradio] (VM81 jquery-ui.js:236)
at HTMLButtonElement.<anonymous> (tryit.asp?filename=tryjquery_event_bind_ref:11)
at HTMLButtonElement.dispatch (VM80 jquery-1.12.4.js:5226)
at HTMLButtonElement.elemData.handle (VM80 jquery-1.12.4.js:4878)

这是我的代码：

$("input").checkboxradio();

var i = 4;
$(".add").click(function(e) {
  $("fieldset:first").append(' <label for="radio-' + i + '">London</label><input type="radio" name="radio-1" id="radio-' + i + '">');
  i++;
});
$(".refresh").click(function(e) {
  $("input").checkboxradio("refresh");
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<h2>Radio Group</h2>
<fieldset>
  <legend>Select a Location: </legend>
  <label for="radio-1">New York</label>
  <input type="radio" name="radio-1" id="radio-1">
  <label for="radio-2">Paris</label>
  <input type="radio" name="radio-1" id="radio-2">
  <label for="radio-3">London</label>
  <input type="radio" name="radio-1" id="radio-3">
</fieldset>
<button class="add">add</button>
<button class="refresh">refresh</button>

Answer 1

问题是，当您单击 add 按钮时，您正在创建一个新的单选输入，但您没有使用 checkboxradio 对其进行初始化。

因此，当您在最后一个输入上调用 refresh 方法时，它会导致您看到的错误。

如果你想在所有输入上调用 refresh，你应该首先初始化你正在创建的复选框：

$("input").checkboxradio();

var i = 4;
$(".add").click(function(e) {
    var id = 'radio-' + i;
    $("fieldset:first").append(' <label for="' + id + '">London</label><input type="radio" name="radio-1" id="' + id + '">');
    $('#' + id).checkboxradio();
    i++;
});
$(".refresh").click(function(e) {
    $("input").checkboxradio("refresh");
});

Answer 2

您只需要在标签和输入单选框中的新增内容中添加一个单独的类，并在 jQuery 代码中进行一些更改。请参阅以下解决方案。只需添加新的类名作为“附加”并使用删除内置属性功能。

$("input").checkboxradio();

var i = 4;
$(".add").click(function(e) {
  $("fieldset:first").append(' <label class="extras" for="radio-' + i + '">London</label><input type="radio" class="extras" name="radio-1" id="radio-' + i + '">');
  i++;
});
$(".refresh").click(function(e) {
 // $("input").checkboxradio("refresh");
  $('.extras').remove();
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<h2>Radio Group</h2>
<fieldset>
  <legend>Select a Location: </legend>
  <label for="radio-1">New York</label>
  <input type="radio" name="radio-1" id="radio-1">
  <label for="radio-2">Paris</label>
  <input type="radio" name="radio-1" id="radio-2">
  <label for="radio-3">London</label>
  <input type="radio" name="radio-1" id="radio-3">
</fieldset>
<button class="add">add</button>
<button class="refresh">refresh</button>