javascriptjqueryjquery.repeater

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

I am using https://github.com/DubFriend/jquery.repeater (jQuery repeater) to repeat the form field.

The Add button is not working, however, 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

Solution

  • You need to wrap your table with <form> tag and use <form> tag class. In your case:

    $('.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>