动态表格行，点击事件代理到新添加的元素

首先只想提一提，我几乎经历过所有类似的问题，并且我的案例中没有解决方案和建议。动态表格行，点击事件代理到新添加的元素

我有这样的构造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>'); 
    }); 
});

来源

2016-04-21 Khkhy

你必须要父母的参考 – RRR

您应该（）'文档更仔细地阅读jQuery的'。您必须将字符串选择器和绑定事件传递给任何静态容器 –

事件代表团捕获容器上的事件，而只是调用回调函数，如果目标元素或父母之一有一定的选择。要委派一个事件，您使用.on()将事件附加到父项，但添加第二个参数，该参数声明目标。例如：

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

您应该将事件处理程序附加到密闭容器中，.table或事件.table > tbody，如果你想绑定忽略标题。

演示（fiddle）：

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

来源

2016-04-21 10:15:36

你的事件代表团是不正确的。尝试如下。

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

UPDATED FIDDLE

来源

2016-04-21 10:07:54 Azim

动态表格行，点击事件代理到新添加的元素

回答

相关问题