我是 jquery 的新手。我有一个页面,其中有两个按钮。其中一个是编辑按钮,另一个是删除按钮。当我单击编辑按钮时,它会删除这两个按钮并在同一位置(删除和编辑按钮之前所在的位置)添加三个元素,其中一个是“保存”按钮。这个保存按钮有一个类——“save-btn”。我通过 jquery 类选择器选择这个按钮。然后点击它应该做一些事情。但是当我点击时没有任何反应。任何人都可以提出问题并给出解决方案。提前致谢。
<div class="container-fluid">
<div class="row">
<div class="col-md-2 "></div>
<div class="col-md-4 ">
<div class="form-tile">
<form action="" method="post">{% csrf_token %}
{% crispy form %}
</form>
</div>
</div>
<div class="col-md-4 tile">
<div class="row">
<div class="col-md-12">
<h2 style="margin-top: 0px;padding-top: 0px;text-align: center">Today's Purchase</h2>
</div>
</div>
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td><button class="btn btn-primary edit-btn"><i class="fa fa-pencil-square-o"></i></button>
<button class="btn btn-danger delete-btn"><i class="fa fa-trash"></i></button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="col-md-2 "></div>
</div>
这是我的javascript
<script>
$(function(){
$(".edit-btn").click(function(){
var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>'
var parent = $(this).parent().parent().html(custom_form);
});
$(".save-btn").click(function(){
alert("asnlas");
});
});
</script>
最佳答案
当你创建一个元素时你必须同时分配事件
试试这个....
$(function(){
$(".edit-btn").click(function(){
var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>'
var parent = $(this).parent().parent().html(custom_form);
$(".save-btn").click(function(){
alert("asnlas");
});
});
});
关于javascript - 单击事件在第一次单击事件后不起作用。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35852558/