使用 jQuery 无法编辑、更新和取消表格单元格文本

Question

我尝试使用 jQuery 更新表中的值。 我希望当我单击“更新”时它会更改值并按原样返回表单。 此外，当我单击“取消”时，它会取消更新。 在我的例子中它不起作用。

 $(document).on('click', '.btn-edit', function(e) { var name = $(this).parents("tr").attr('data-name'); var email = $(this).parents("tr").attr('data-email'); $(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="' + name + '">'); $(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="' + email + '">'); $(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>") $(this).hide(); }); $(document).on('click', '.btn-update', function(e) { var name = $(this).parents("tr").attr('data-name'); var email = $(this).parents("tr").attr('data-email'); $(this).parents("tr").find("td:eq(0)").text(name); $(this).parents("tr").find("td:eq(1)").text(email); $(this).parents("tr").find(".btn-edit").show(); $(this).parents("tr").find(".btn-update").remove(); $(this).parents("tr").find(".btn-cancel").remove(); }); $(document).on('click', '.btn-cancel', function(e) { var name = $(this).parents("tr").find("input[name='edit_name']").val(); var email = $(this).parents("tr").find("input[name='edit_email']").val(); $(this).parents("tr").find("td:eq(0)").text(name); $(this).parents("tr").find("td:eq(1)").text(email); $(this).parents("tr").attr('data-name', name); $(this).parents("tr").attr('data-email', email); $(this).parents("tr").find(".btn-edit").show(); $(this).parents("tr").find(".btn-cancel").remove(); $(this).parents("tr").find(".btn-update").remove(); });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <div class="container"> <table class="table table-bordered "> <thead> <th>Name</th> <th>Email</th> <th width="200px">Action</th> </thead> <tbody> <tr data-name='marzouk najib' data-email='marzouk@gmail.com'> <td>marzouk najib</td> <td>marzouk@gmail.com</td> <td><button class='btn btn-info btn-xs btn-edit'>Edit</button></td> </tr> </tbody> </table> </div>

Answer 1

在动态创建和删除按钮时，您需要使用委托的事件处理程序。

另外你的逻辑不太对。 单击“更新”按钮而不是“取消”时，您需要更新tr上的数据属性。

也可以通过将选择器缓存在变量中而不是为每个方法调用重新创建它们来改进逻辑。 此外，您可以使用closest()而不是parents()来获取最近的父tr元素， data()而不是attr()来读取数据属性，还可以使用children()而不是find()来获取子td 。

话虽如此，试试这个：

 $(document).on('click', '.btn-edit', function(e) { let $tr = $(this).hide().closest('tr'); $tr.children("td:eq(0)").html(`<input name="edit_name" value="${$tr.data('name')}">`); $tr.children("td:eq(1)").html(`<input name="edit_email" value="${$tr.data('email')}">`); $tr.children("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>") }); $(document).on('click', '.btn-update', function(e) { let $tr = $(this).closest('tr'); let name = $tr.find('[name="edit_name"]').val(); let email = $tr.find('[name="edit_email"]').val(); $tr.data({ name, email }); $tr.children("td:eq(0)").text(name); $tr.children("td:eq(1)").text(email); $tr.find(".btn-edit").show(); $tr.find(".btn-update, .btn-cancel").remove(); }); $(document).on('click', '.btn-cancel', function(e) { let $tr = $(this).closest('tr'); $tr.children("td:eq(0)").text($tr.data('name')); $tr.children("td:eq(1)").text($tr.data('email')); $tr.find(".btn-edit").show(); $tr.find(".btn-update, .btn-cancel").remove(); });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <div class="container"> <table class="table table-bordered "> <thead> <th>Name</th> <th>Email</th> <th width="200px">Action</th> </thead> <tbody> <tr data-name='marzouk najib' data-email='marzouk@gmail.com'> <td>marzouk najib</td> <td>marzouk@gmail.com</td> <td><button class='btn btn-info btn-xs btn-edit'>Edit</button></td> </tr> </tbody> </table> </div>

Answer 2

创建普通事件侦听器时，它会立即绑定到页面上的现有元素。 所以动态元素不会得到事件监听器。

您可以使用委托来解决 btn-update 事件侦听器的问题，请改用：

$(document).on('click','.btn-update', function(e) {

Answer 3

问题是您正在为 btn-cancel 和 btn-update 设置事件侦听器，当它们尚不存在时，尝试在创建按钮后立即设置事件，或者创建按钮并显示/隐藏取消/更新按钮。

 $('.btn-edit').on('click', function(e) { var name = $(this).parents("tr").attr('data-name'); var email = $(this).parents("tr").attr('data-email'); $(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="'+name+'"/>'); $(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="'+email+'"/>'); $(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>") $(this).hide(); $('.btn-cancel').on('click', function(e) { var name = $(this).parents("tr").attr('data-name'); var email = $(this).parents("tr").attr('data-email'); $(this).parents("tr").find("td:eq(0)").text(name); $(this).parents("tr").find("td:eq(1)").text(email); $(this).parents("tr").find(".btn-edit").show(); $(this).parents("tr").find(".btn-update").remove(); $(this).parents("tr").find(".btn-cancel").remove(); }); $('.btn-update').on('click', function(e) { var name = $(this).parents("tr").find("input[name='edit_name']").val(); var email = $(this).parents("tr").find("input[name='edit_email']").val(); $(this).parents("tr").find("td:eq(0)").text(name); $(this).parents("tr").find("td:eq(1)").text(email); $(this).parents("tr").attr('data-name', name); $(this).parents("tr").attr('data-email', email); $(this).parents("tr").find(".btn-edit").show(); $(this).parents("tr").find(".btn-cancel").remove(); $(this).parents("tr").find(".btn-update").remove(); }); });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <div class="container"> <table class="table table-bordered "> <thead> <th>Name</th> <th>Email</th> <th width="200px">Action</th> </thead> <tbody> <tr data-name='marzouk najib' data-email='marzouk@gmail.com'> <td>marzouk najib</td> <td>marzouk@gmail.com</td> <td><button class='btn btn-info btn-xs btn-edit'>Edit</button></td> </tr> </tbody> </table> </div>

Answer 4

不需要像其他人一样通过使用事件委托on('click','.btn-update', function(e) {

但我可以给你一些其他建议：

• 您可以改为在表格上注册所有点击事件； 只剩下一个单击事件侦听器，而不是在每个编辑按钮上注册一个单击事件 - 如果您有很多行，这可以提高性能。 它们都适用于新插入/修改的行，甚至是编辑按钮。
• 在连接输入值和使用.html()时要小心，他们可以通过转义引号来嵌入 javascript 和其他 html 标签。 （看看我是如何解决的）
• 并且您最好不要使用$(document).on('click'最好将其缩小到表格，否则对于您在表格外进行的每次点击，事件侦听器都会在 jQuery 的核心内部触发
• 您正在使用大量$(this).parent('tr').find()这可以缓存并减少查询元素所需的工作量，如果您只是缓存 tr 并将其用作选择器容器$('.class', tr)看看我是如何在下面解决它的

 $('table') .on('click', '.btn-edit', function(e) { const tr = $(this).parents("tr")[0] const { name, email } = tr.dataset $("td:eq(0)", tr).empty().append($('<input>', {name: 'edit_name', value: name})) $("td:eq(1)", tr).empty().append($('<input>', {name: 'edit_email', value: email})) $("td:eq(2)", tr).prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>") $(this).hide() }) .on('click', '.btn-cancel', function(e) { const tr = $(this).parents("tr")[0] const { name, email } = tr.dataset $("td:eq(0)", tr).text(name) $("td:eq(1)", tr).text(email) $(".btn-edit", tr).show() $(".btn-update, .btn-cancel", tr).remove() }) .on('click', '.btn-update', function(e) { const tr = $(this).parents("tr")[0] const name = $("input[name='edit_name']", tr).val() const email = $("input[name='edit_email']", tr).val() tr.dataset.name = name tr.dataset.email = email $("td:eq(0)", tr).text(name) $("td:eq(1)", tr).text(email) $(".btn-edit", tr).show() $(".btn-cancel, .btn-update", tr).remove() })

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <div class="container"> <table class="table table-bordered "> <thead> <th>Name</th> <th>Email</th> <th width="200px">Action</th> </thead> <tbody> <tr data-name='marzouk najib' data-email='marzouk@gmail.com'> <td>marzouk najib</td> <td>marzouk@gmail.com</td> <td><button class='btn btn-info btn-xs btn-edit'>Edit</button></td> </tr> </tbody> </table> </div>

但这仍然与我如何处理它相去甚远，我会将逻辑与 js/html 分开

• HTML 应该处理演示文稿，而 javascript 应该在不知道名称或电子邮件之类的东西的情况下增强它 - 把它想象成编写一个 jQuery 插件，它可以理解 html 结构体并使其适用于任意数量的列