动态表行，将单击事件委派给新添加的元素

Dynamic table row, delegation of click event to newly added elements

本文关键字：新添加 添加 元素 委派 事件 单击 动态      更新时间：2023-09-26

首先，我想提一下，我几乎经历了每一个类似的问答，在我的案例中，没有解决方案和建议帮助了我。

我有这个构造 DEMO，并在下面输入向表添加新元素的代码。我喜欢新元素，它是一个 tr 和 td，具有与现有元素相同的功能。我尝试了live（）和delegate（），没有任何效果。所有指向我已经在使用但仍然不起作用的 on（） 函数的建议和教程。我做错了什么？请，任何建议将不胜感激。下面的代码添加了新元素：

$(function(){
    $('#add').on('click',function() {
        $('#edit-tb tr:last').after('<tr><td><button class="up">Up</button></td><td><span class="times" data-myval="1"></span>Goe</td><td><button class="down">Down</button></td></tr>');
    });
});

您的事件委派不正确。尝试如下。

$(document).on('click', '.up', function () {
    var count = $(this).closest('tr').find('.times').attr('data-myval');
    count++;
    if (count > 4) {
        count--;
        $('#max').modal('show');
        $(this).closest('tr').find('.times').text(4 + ' x ');
    }
    $(this).closest('tr').find('.times').attr('data-myval', count);
    $(this).closest('tr').find('.times').text(count + ' x ');
});
$(document).on('click', '.down', function () {
    var count = $(this).closest('tr').find('.times').attr('data-myval');
    count--;
    parseInt($(this).closest('tr').find('.times').attr('data-myval', count))
    $(this).closest('tr').find('.times').text(count + ' x ');
    if (count < 2) {
        $(this).closest('tr').find('.times').text('');
    }
    if (count < 1) {
        $(this).parents('tr').remove();
    }
});

更新的小提琴

事件委托在容器上捕获事件，但仅在目标元素或其父元素之一具有特定选择器时才调用回调。要委派事件，请使用 .on() 将事件附加到父级，但添加第二个参数，用于声明目标。例如：

  $('.table') // container
      /* event , target, handler */
    .on('click', '.up' , function() {});

如果希望绑定忽略标头，则应将事件处理程序附加到关闭容器、.table或事件.table > tbody。

演示（小提琴）：

$(function() {
  $('.table')
    .on('click', '.up', function() {
        var element = $(this);
      var count = element.closest('tr').find('.times').attr('data-myval');
      count++;
      if (count > 4) {
        count--;
        $('#max').modal('show');
        element.closest('tr').find('.times').text(4 + ' x ');
      }
      element.closest('tr').find('.times').attr('data-myval', count);
      element.closest('tr').find('.times').text(count + ' x ');
    })
    .on('click', '.down', function() {
        var element = $(this);
      var count = element.closest('tr').find('.times').attr('data-myval');
      count--;
      parseInt(element.closest('tr').find('.times').attr('data-myval', count))
      element.closest('tr').find('.times').text(count + ' x ');
      if (count < 2) {
        element.closest('tr').find('.times').text('');
      }
      if (count < 1) {
        element.parents('tr').remove();
      }
    });
});
相关文章：