代码之家 › 专栏 › 技术社区 › robert trudel

Javascript不在片段调用中运行

thymeleaf javascript

robert trudel · 技术社区 · 6 年前

我用百里香。

在百里香的页面上

<html th:lang="${#locale.language}">
   <head th:include="fragments/head :: HeadCss"/>
   <body>
      <div th:replace="fragments/top-menu :: TopMenu('test')"></div>
      <div class="container-fluid">
      <div id="main" class="main">
      <!--display info about how many for durability, granularity, scalling, flexion...-->
      <div role="tabpanel">
         <div class="col-sm-3">
            <form>
               <div class="form-group">
                  <label for="testType" th:text="#{testTypeEnum.select.label}"></label>
                  <select class="form-control" id="testType" >
                     <option th:value="NULL" selected="selected" th:text="#{form.select.empty}"></option>
                     <option th:each="testType : ${testTypes}" th:value="${testType}" th:text="#{'testTypeEnum.'+${testType}}"></option>
                  </select>
               </div>
            </form>
         </div>
         <div id="testListResultFragment">
         </div>
      </div>
      <script type="text/javascript" th:inline="javascript">
        $(document).ready(function () {
          $("#testType").on('change', function() {
            var valueSelected=  this.value;
            var url = "/samplestesttable?testTypeValue="+valueSelected;
            $("#testListResultFragment").load(url);
          });
        });
      </script>
    </body>
</html>

当用户在select中选择某个内容时,我会通过ajax调用thymeleaf片段返回。

返回的片段看起来像

<div th:fragment="TestList" th:remove="tag">
  <table id="samplesTestsTable" class="table table-striped table-hover dt-responsive" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th th:text="#{id}">Sample</th>
        <th th:text="#{buildDate}">Build date</th>
        <th th:text="#{productTypes}">Product Types</th>
        <th th:text="#{products}">Products</th>
        <th th:text="#{suppliers}">Supplier</th>
        <th th:text="#{machines}">Machine</th>
        <th th:text="#{test}">Test</th>
      </tr>
    </thead>
  </table>

  <script type="text/javascript" th:inline="javascript">
    $(document).ready(function () {

      var samplesTestTable = $('#samplesTestsTable').DataTable({
         ....
         'fnDrawCallback': function (oSettings) {
           $('.dataTables_filter').each(function () {
             $("div.samples-toolbars").html('<div><input type="checkbox" id="testDoneInclude" name="testDoneInclude" class="form-check-input" /><label for="testDoneInclude" class="form-check-label">Test done include</label></div>');
             });
          },
      }); 

     $("#testDoneInclude").on('change', function(){
          //no called
     };

    });
  </script>

</div>

从不调用TestDoneInclude更改事件

谢谢

1 回复 | 直到 6 年前

seebiscuit 6 年前

jQuery绑定到DOM中存在的元素。你必须 #testDoneInclude 在它生成之前。最简单的解决方法是将绑定委托给在执行事件绑定时页面上的祖先元素。例如,

 $('.dataTables_filter').on('change', "#testDoneInclude", function(){
      // Will be called when "#testDoneInclude" changes
 };

然而,注意一个重要的观察。

方法 id 在HTML中,属性的作用是页面只需要一个具有唯一id名称的元素。

$('.dataTables_filter').each(function () {
   $("div.samples-toolbars").html('<div><input type="checkbox" id="testDoneInclude" name="testDoneInclude" class="form-check-input" /><label for="testDoneInclude" class="form-check-label">Test done include</label></div>');
    });
},

这个 each 上面剪贴画中的循环为中的每一行创建一个复选框 '.dataTables_filter' ,因此您有几个复选框都具有相同的唯一id。这是一个属性可能有用的地方。我使用自定义属性(想想 data- ,我喜欢 data-hook )然后绑定到所有这些生成的元素。因此,如果创建以下元素:

<input type="checkbox" id="testDoneInclude" name="testDoneInclude" class="form-check-input" /><label for="testDoneInclude" class="form-check-label" 
  data-hook="test-done-include"> // This is our custom attribute

你会把它绑起来,就像上面一样,

 $('.dataTables_filter').on('change', "[data-hook="test-done-include"]", function(){
      // Will be called when "#testDoneInclude" changes
 };

(注意括号[data hook=“test done include”]`)。你的DOM将是有效的。

当然,如果这是在一个表单中,您会遇到问题,因为表单需要 name 或 身份证件 属性。还有你的 label 如果它不包住 input . 在这种情况下,您可能仍然需要 数据- 事件绑定的属性,但您必须使用生成的id来友好地使用 form s和 标签 s。