使用jquery "checkboxradio“小部件动态创建复选框

Question

我正在使用名为jquery UI的支票箱无线电小部件，因为我发现它很有趣，他们提供的美学没有复选框，就像一个按钮一样。

我遇到的问题是，我需要动态地创建复选框，因为根据数据库中的信息，会有一个或另一个。具体来说，问题是我能够生成我需要的复选框，没有问题，但是小部件样式没有应用于它们。也就是说，它们出现在我的页面上，但它们以默认格式出现。有人能帮我告诉我，如果我进口了错误的东西，或者说是错的，等等？

下面是我的密码。我通过创建一个复选框对其进行了调整，因为唯一的区别是它将有一个循环，该循环创建的复选框大致与现在相同，但名称不同。

​

function printNodeFilters(nodes) {
  $("#legend_filtro_datos").after('<label for="checkbox-2">tracker 1</label>');
  $("#legend_filtro_datos").after('<input type="checkbox" name="TRACKER1" id="checkbox-2">');
}


// MAIN
$(document).ready(function() {
  printNodeFilters();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- *** WIDGET *** -->
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $("input").checkboxradio({
      icon: false
    });
  });
</script>
<!-- ****** -->


<div class="col-2" id="filter_container">
  <!-- FILTROS-->
  <legend>Filtros mapa: </legend>
  <label for="radio_ult_pos">Última posición</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
  <label for="radio_ruta">Ruta</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">

  <legend id="legend_filtro_datos">Filtros datos: </legend>
  <!-- AQUÍ IRÍAN LOS CHECKBOX -->

  
  <button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>

​

我不太明白会发生什么，因为如果我直接在我的html中以静态的方式创建它，就没有问题，它看起来和工作都很完美。这让我认为，在我的js文件中，我可能需要调用小部件或其他东西，但我不知道是什么。

如果您为js创建任何东西，这将是一个功能代码，

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- *** WIDGET *** -->
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $("input").checkboxradio({
      icon: false
    });
  });
</script>
<!-- ****** -->


<div class="col-2" id="filter_container">
  <!-- FILTROS-->
  <legend>Filtros mapa: </legend>
  <label for="radio_ult_pos">Última posición</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
  <label for="radio_ruta">Ruta</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">

  <legend id="legend_filtro_datos">Filtros datos: </legend>
  <label for="checkbox-2">tracker 1</label>
  <input type="checkbox" name="TRACKER1" id="checkbox-2">

  
  <button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>

​

如您所见，在第二个示例中，它被很好地创建了。那么，如果我复制和粘贴了相同的代码，那么在执行追加时怎么会不起作用呢?我附加错误了？打印复选框后，我需要调用js中的函数吗？

我希望我解释得很好，非常感谢。

Answer 1

在动态添加其他元素时，必须先对小部件进行refresh，或者，如果小部件当前未初始化，则必须初始化小部件。

$(function() {
  printNodeFilters();
  $("input").checkboxradio();
});

完整的例子：

​

function printNodeFilters(nodes) {
  $("#legend_filtro_datos").after('<label for="checkbox-2">tracker 1</label>');
  $("#legend_filtro_datos").after('<input type="checkbox" name="TRACKER1" id="checkbox-2">');
}

$(function() {
  printNodeFilters();
  $("input").checkboxradio();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-2" id="filter_container">
  <!-- FILTROS-->
  <legend>Filtros mapa: </legend>
  <label for="radio_ult_pos">Última posición</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
  <label for="radio_ruta">Ruta</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">
  <legend id="legend_filtro_datos">Filtros datos: </legend>
  <!-- AQUÍ IRÍAN LOS CHECKBOX -->
  <button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>

​