jQuery按钮没有响应
jQuery按钮没有响应
提问于 2017-06-29 12:01:32
我想克隆一排桌子。这不管用。即使是console.log();也不起作用。
我在试图克隆‘桌子包装’div。
<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>€</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文件包括在内。它记录：“准备”在页面加载和另一个按钮工作。
我使用引导程序的表示例创建了一个新表。即使有这张新桌子，它也不能用。当我点击按钮时，它不会触发任何东西。即使在控制台中，它也不会记录任何内容。(除了“准备好了！”)
<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>回答 1
Stack Overflow用户
发布于 2017-06-29 12:21:04
你在这里搞错了
$(“..table包装器: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>€</p>
</td>
</tr>
</table>
<div class="col-lg-12">
<input type="button" id="newcollection" class="btn btn-primary" value="+">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44824597
复制相关文章
相似问题
腾讯云开发者
