Javascript не работает во фрагменте вызова - PullRequest
Новая
       4

Javascript не работает во фрагменте вызова

0 голосов
/ 31 декабря 2018

Я использую тимилиф.

На странице тимелина я делаю 

<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 никогда не вызывается

спасибо

1 Ответ

0 голосов
/ 31 декабря 2018

jQuery связывается с элементами, которые существуют в DOM.Вы привязываетесь к #testDoneInclude до того, как оно будет сгенерировано.Самый простой обходной путь - делегировать привязку элементу-предку, который, как вы знаете, будет на странице во время выполнения привязки события.Так, например, 

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

Однако обратите внимание на важное наблюдение.

Способ работы id свойств в HTML заключается в том, что страница ожидает ровно один элемент с уникальным именем идентификатора.

$('.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', и поэтому у вас есть несколько флажков с одинаковым уникальным идентификатором.Здесь атрибут может быть полезен.Я использую пользовательские атрибуты (например, что-то, начинающееся с 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-включают в себя "]`).И ваш DOM будет действительным.

Конечно, у вас будут проблемы, если это внутри формы, поскольку для форм требуется атрибут name или id.И ваш label не будет работать, если он не обернет input.В подобных случаях вам может понадобиться атрибут data- для привязки к событию, но вам придется использовать сгенерированный идентификатор, чтобы дружелюбно играть с form s и label s.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...