Question

我用百里香。

我在百里香页中

<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>

当用户在选择内容中选择某项时，我确实会通过ajax调用百里香片段返回。

返回的片段看起来像

<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更改事件

谢谢

Answer 1

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或id属性。如果您的label不包装input，将无法正常工作。在这种情况下，您可能仍希望将data-属性用于事件绑定，但是必须使用生成的ID来与form和label友好地玩。

Javascript未在片段调用中运行

1 个答案: