Почему кнопка добавления ретранслятора jQuery не работает, когда я пытаюсь поместить ее в tr td? - PullRequest
Новая
       23

Почему кнопка добавления ретранслятора jQuery не работает, когда я пытаюсь поместить ее в tr td?

1 голос
/ 01 ноября 2019

Я использую https://github.com/DubFriend/jquery.repeater (повторитель jQuery) для повторения поля формы.

Кнопка Добавить не работает, однако delete is working fine

$('.repeater').repeater();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<table class="repeater">
  <tbody data-repeater-list>
    <tr data-repeater-item>
      <td>
        <select>
          <option value=" ">-- Select --</option>
          <option value="1">One</option>
          <option value="2">One</option>
          <option value="3">One</option>
          <option value="4">One</option>
          <option value="5">One</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
  </tbody>
  <input data-repeater-create type="button" value="Add" />

</table>

jsfiddle

Ответы [ 2 ]

0 голосов
/ 01 ноября 2019

Пожалуйста, попробуйте включить Добавить в data-repeater-list, как показано ниже, и оно будет работать. 

$('.repeater').repeater();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<table class="repeater">


  <tbody data-repeater-list>
    <tr>
      <td><input data-repeater-create type="button" value="Add"/></td>
    </tr>

    <tr data-repeater-item>
      <td>
        <select>
          <option value=" " >-- Select --</option>
          <option value="1" >One</option>
          <option value="2" >One</option>
          <option value="3" >One</option>
          <option value="4" >One</option>
          <option value="5" >One</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete"/>
      </td>
    </tr>
    
    
  </tbody>
  

</table>
0 голосов
/ 01 ноября 2019

Вам нужно обернуть таблицу тегом <form> и использовать тег <form> class. В вашем случае: 

$('.repeater').repeater();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>

<form class="repeater">
  <table class="repeater1">
    <tbody data-repeater-list>
      <tr data-repeater-item>
        <td>
          <select>
            <option value=" ">-- Select --</option>
            <option value="1">One</option>
            <option value="2">One</option>
            <option value="3">One</option>
            <option value="4">One</option>
            <option value="5">One</option>
          </select>
        </td>
        <td>
          <input data-repeater-delete type="button" value="Delete" />
        </td>
      </tr>
    </tbody>
    <input data-repeater-create type="button" value="Add" />

  </table>
</form>
...