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

首先，我想说的是，我几乎经历过每一个类似的问答，在我的案例中，没有任何解决方案和建议对我有所帮助

我有这个结构，下面是向表中添加新元素的代码。我喜欢新的元素，它是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>');
    });
});

$（函数（）{
$（'#添加'）。在（'单击'，函数（）上）{
$（'#edit tb tr:last'）。在（'UpGoeDown'）之后；
});
});

您的活动委派不正确。试着像下面这样

$(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（'click'，'up'，函数（）{
var count=$（this.closest（'tr'）.find（'.times'）.attr（'data-myval'）；
计数++；
如果（计数>4）{
计数--；
$（'#max'）。模态（'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'）；
});
$（文档）.on（'单击'，'.down'，函数（）{
var count=$（this.closest（'tr'）.find（'.times'）.attr（'data-myval'）；
计数--；
parseInt（$（this.closest（'tr'）.find（'.times'）.attr（'data-myval'，count））
$（this）.closest（'tr'）.find（'.times'）.text（count+'x'）；
如果（计数<2）{
$（this）.closest（'tr'）.find（'.times'）.text（''）；
}
如果（计数<1）{
$（this.parents（'tr'）.remove（）；
}
});

---

事件委派捕获容器上的事件，但仅当目标元素或其父元素之一具有特定选择器时才调用回调。若要委派事件，请使用将事件附加到父级，但添加第二个参数，该参数表示目标。例如：

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

如果希望绑定忽略标题，则应将事件处理程序附加到一个封闭容器

.table

或事件

.table>tbody

演示（）：

$（函数（）{
$（“.table”）
.on（'click'，'.up'，函数（）{
var元素=$（此）；
var count=element.closest（'tr'）.find（'.times'）.attr（'data-myval'）；
计数++；
如果（计数>4）{
计数--；
$（'#max'）。模态（'show'）；
元素。最近（'tr'）。查找（'.times'）。文本（4+'x'）；
}
元素。最近（'tr'）。查找（'.times'）。属性（'data-myval'，计数）；
元素。最近（'tr'）。查找（'.times'）。文本（计数+x'）；
})
.on（'click'，'down'，函数（）{
var元素=$（此）；
var count=element.closest（'tr'）.find（'.times'）.attr（'data-myval'）；
计数--；
parseInt（element.closest（'tr'）。find（'times'）。attr（'data-myval'，count））
元素。最近（'tr'）。查找（'.times'）。文本（计数+x'）；
如果（计数<2）{
元素。最近（'tr'）。查找（'.times'）。文本（''）；
}
如果（计数<1）{
元素的父元素（'tr'）.remove（）；
}
});
});

on（）上的jQuery

on（）

doc应该仔细阅读。必须将字符串选择器和绑定事件传递给任何静态容器

$(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();
      }
    });
});