jQuery按钮没有响应

Question

我正在尝试克隆一个表格行。这是行不通的。即使console.log(); 也不起作用。

我正在尝试克隆 'table-wrapper' div。

HTML

 <div class="table-wrapper">

  <tr>

      <td style="width: 300px">
        <select class="form-control" id="sel1">
        @foreach($products as $product)
          <option value="{{$product->id}}">{{$product->product_name}}</option>
        @endforeach
        </select>
      </td>

      <td style="width: 100px;">
        <input type="text" class="form-control" id="">
      </td>

      <td style="width: 300px">
        <select class="form-control" id="sel1">
          <option>Dag</option>
          <option>Week</option>
          <option>Weekend</option>
          <option>4</option>
        </select>
      </td>

      <td>
        <select class="form-control" id="sel1">
          <option>0</option>
          <option>6</option>
          <option>21</option>
        </select>
      </td>

      <td style="width: 150px;">
        <input type="text" class="form-control" id="">
      </td>

      <td style="padding-top: 20px;">
        <p>&euro;</p>
      </td>


  </tr>

JS 文件

$(document).ready(function() {
    console.log( "ready!" );

    $('#newcollection').click(function () {
      $(".table-wrapper:first").clone().insertAfter(".table-wrapper:last");
    });

    $('#newinput').click(function () {
      $(".rent-wrapper:first").clone().insertAfter(".rent-wrapper:last");
    });


});

按钮

<div class="col-lg-12">
  <input type="button" id="newcollection" class="btn btn-primary" value="+">
  </div>
</div>

你知道为什么这不起作用吗？正如我所说，甚至 console.log();不工作。

编辑：包含 JS 文件。它记录：页面加载时“准备就绪”，另一个按钮确实有效。

------------------[编辑]--------------- -----------------------------

我使用 bootstrap 的表示例创建了一个新表。即使有了这张新桌子，它也不起作用。当我单击按钮时，它不会触发任何东西。即使在控制台中，它也不会记录任何内容。 （“准备好了！”除外）

<div class="table-wrapper">
<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
<input type="button" id="newcollection" class="btn btn-primary" value="+">
</div>

包含的 JS 文件

<script src="{!! env('APP_URL') !!}/js/jquery-migrate-1.2.1.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/bootstrap.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/modernizr.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/pace.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/retina.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/jquery.cookies.js"></script>
<script src="{!! env('APP_URL') !!}/js/main.js"></script> // This is the file i'm currently editting.

<script src="{!! env('APP_URL') !!}/js/jquery.sparkline.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/morris.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/raphael-2.1.0.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/bootstrap-wizard.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/select2.min.js"></script>

<script src="{!! env('APP_URL') !!}/js/custom.js"></script>

Answer 1

你错了

$(".table-wrapper:first")

您只想重复 tr，但您的目标是 .table-wrapper 类元素

$(document).ready(function() {
  console.log("ready!");

  $('#newcollection').click(function() {
    $(".table-wrapper tr").eq(0).clone().insertAfter(".table-wrapper tr:last");
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
  <table>
    <tr>

      <td style="width: 300px">

      </td>

      <td style="width: 100px;">
        <input type="text" class="form-control" id="">
      </td>

      <td style="width: 300px">
        <select class="form-control" id="sel1">
          <option>Dag</option>
          <option>Week</option>
          <option>Weekend</option>
          <option>4</option>
        </select>
      </td>

      <td>
        <select class="form-control" id="sel1">
          <option>0</option>
          <option>6</option>
          <option>21</option>
        </select>
      </td>

      <td style="width: 150px;">
        <input type="text" class="form-control" id="">
      </td>

      <td style="padding-top: 20px;">
        <p>&euro;</p>
      </td>


    </tr>
  </table>
  <div class="col-lg-12">
    <input type="button" id="newcollection" class="btn btn-primary" value="+">
  </div>
</div>