Question

我在使用click事件在表上添加行时遇到了一些问题我只能添加一行。

 $('.add-result').on('click', function(event){
    console.log('click');
    event.preventDefault();
    var letter = $(this).closest('tr').find("input[name='key']").val();
    var thisRow = $(this).closest('tr');
    var nextLetter = nextChar(letter);
    $(thisRow).clone().insertAfter(thisRow).find("input[name='key']").val(nextLetter);
        $(this).remove();
  });

这是我的jsfiddle

我不知道如何解决我的问题

Answer 1

使用Ionic guidelines，一个布尔值，指示是否应将事件处理程序与元素一起复制

$(thisRow).clone(true)

.clone(withDataAndEvents)

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。

正在克隆元素并添加它们在动态生成元素或操作选择器（如删除和添加）时，需要使用DEMO With Clone委托事件方法Event Delegation类）。

一般语法

$(parentStaticContainer).on('event','selector',callback_function)

实施例

$('.table').on('click', '.add-result', function(event) {
});

代替document，您应该使用最近的静态容器。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

好读.on()

Direct and delegated events

在点击事件上添加行

1 个答案: