checkboxradio中的刷新方法不起作用

Question

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

未捕获的错误:无法在初始化之前调用checkboxradio上的方法；尝试调用方法“”refresh“”

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对其进行初始化。

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

如果要在所有输入上调用刷新，则应首先初始化正在创建的复选框：

$("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代码中稍作更改。请参考下面的解决方案。只需添加新的类名作为"extras“，并使用删除内置属性函数。

​

$("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>

​