javascript - 添加新内容后如何重新加载 Javascript/Jquery
问题描述
我在表单中有一个表格,我可以在其中添加更多行。当我更改单元格内的值时,它应该运行 ajax 函数。这在第一行上工作正常(在页面加载时加载),但是当我添加更多行时,该功能不会影响其他行。
我该怎么做才能$("form :input").change('input', urenForm);
在新行上使用?
这不是原始脚本,但主要部分是在其中显示我的问题(原始内容太多无法发布)
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
(function($) {
function urenForm() {
event.preventDefault();
var target = event.target,
parent = null;
for (; target && target !== document; target = target.parentNode) {
if (target.matches('tr')) parent = target;
}
var childnodes = parent.querySelectorAll('input, select'),
data = new FormData();
for (var i = 0; i < childnodes.length; i++) {
var child = childnodes[i];
data.append(child.name, child.value);
}
$.ajax({
url: 'ajax.php',
dataType: 'json',
type: 'post',
data: data,
processData: false,
contentType: false,
success: function(data, textStatus) {
alert('Changed');
}
});
};
$("form :input").change('input', urenForm);
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form>
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4"><input type="text" name="name" class="form-control" /></td>
<td class="col-sm-4"><input type="mail" name="mail" class="form-control" /></td>
<td class="col-sm-3"><input type="text" name="phone" class="form-control" /></td>
<td class="col-sm-2">
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;"><input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" /></td>
</tr>
</tfoot>
</table>
</form>
</div>
解决方案
推荐阅读
- json - 无法在 json Laravel 中返回关系元素
- sql - 通过匹配列的值从两个数据库中提取数据
- r - Rvest 网页抓取如何获取下一页
- python - 使用 python 2.7 构建 Conda noarch 包
- arrays - 如何在反应中使用 jest 编写单元测试用例?
- python - 如何在 python 2.7 中处理 Unicode 问题而不忽略
- flutter - Flutter 是否可以在不创建新状态的情况下推送已经初始化的页面?
- sql - 转换行中的列名
- ajax - 为什么 Symfony4 在这个 ajax 请求上给匿名用户?
- cordova - Cordova 插件 - 安装特定平台的最后可用版本