javascript - checkboxradio 中的刷新方法不起作用

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

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

因此，当您对最后一个输入调用 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");
});