为什么 jQuery 转发器的添加按钮在我尝试将其放置在 tr td 上时不起作用？

Question

我正在使用 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

Answer 1

您需要用 <form> 标签包裹 table 并使用 <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>

Answer 2

请尝试将 Add 包含在 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>

为什么 jQuery 转发器的添加按钮在我尝试将其放置在 tr td 上时不起作用？

Why does jQuery repeater's add button not working when I try to placed it on tr td?

javascript

jquery

jquery.repeater