Question

使用jQuery 1.7x，我在动态生成的选项卡中创建了整个表，这些选项卡包含多个列，其中一些列需要是可点击的。

除了动态内容上难以捉摸的点击事件外，一切似乎都很棒。我刚学会了如何使用.on方法对列表项执行此操作，但它似乎不适用于我的表。（如果重要的话，每个jQuery选项卡都会在给定年份内动态添加，并且该选项卡上的表格包含当年举行的所有会议）

得到了这个

<table>
     <tr><td><span class="ClickableClass">Is Clickable</span></td><td>Regular TD</td></tr>
</table>
<div id='myTab'></div>

$('.ClickableClass').on('click',function() {alert("ClickableClass click event") });

$('#myTab').append('<table border></table>');
var myTable = $('#myTab').children();
for(i=0;i<3;i++){
   var mySpan = $('<span></span>').addClass('ClickableClass').text('Should be clickable ' + i);
    var myTD = $('<td></td>').append( mySpan );
    var myTR = $('<tr></tr>').append( myTD );
   $(myTable).append( myTR );
}

另外，我不知道这是动态构建表格的最佳方式，但这对我来说是最清楚的，所以任何有关此目的的建议都会受到赞赏。：）

Answer 1

您正在向对象添加事件处理程序，然后创建新的事件处理程序，并且从不向新对象添加事件处理程序。有两种方法可以解决这个问题。第一个是在每个之后添加事件处理程序，但是重复代码。如果您知道您将拥有动态内容，则更好的方法是将事件处理程序添加到容器，并通过将选择器传递给事件来告诉容器在特定类型的元素中查找click事件： http://jsfiddle.net/gregjuva/Hs4Kq/

$('body').on('click', '.ClickableClass', function() {
    alert("ClickableClass click event"); 
});

Answer 2

.on()函数的参数顺序中的问题：

$('body').on('click', '.ClickableClass', function() {
   alert("ClickableClass click event"); 
});

http://jsfiddle.net/KYkRZ/5/

Answer 3

$('#myTab').on('click', 'span.ClickableClass', function() {alert("ClickableClass click event") });
$('#myTab').append('<table border></table>');
var myTable = $('#myTab').children();
for(i=0;i<3;i++){
    var mySpan = $('<span></span>').addClass('ClickableClass').text('Should be clickable ' + i);
    var myTD = $('<td></td>').append( mySpan );
    var myTR = $('<tr></tr>').append( myTD );
    $(myTable).append( myTR );
}

DEMO.

Answer 4

在这种情况下，您可以将click事件绑定到span：

var mySpan =
    $('<span></span>')
        .addClass('ClickableClass')
        .bind('click', function() { alert('it works'); })
        .text('Should be clickable ' + i);

Answer 5

只是为了稍微优化一下，您可以缓存变量，并消除for循环中不必要的jQuery对象。

的 I would do it this way: 的

var $body = $("body"), $myTab = $("#myTab").append("<table border></table>").children(); $body.on("click", ".ClickableClass", function() { alert($(this).html().trim()); }); for(i = 0; i < 3; i++) { $myTab.append("<tr><td><span class=\"ClickableClass\">Should be clickable " + i + "</span></td></tr>"); }

如何使用包含可单击SPAN的单元格附加表格

5 个答案: