Question

我正在使用名为checkboxradio的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>

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

1 个答案: