1

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

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

我错过了什么？我在http://jsfiddle.net/KYkRZ/有这个

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

另外，我不知道这是动态构建表格的最佳方式，但它对我来说是最清楚的理解，因此对此提出的任何建议将不胜感激。:)

4

5 回答 5

1

您正在将事件处理程序添加到对象，然后创建新的并且永远不会将事件处理程序添加到新的对象。有两种方法可以处理这个问题。第一个只是在每个之后添加事件处理程序，但这会重复代码。如果您知道您将拥有动态内容，则更好的方法是将事件处理程序添加到容器中，并通过将选择器传递给事件来告诉容器在特定类型的元素中查找单击事件。

$('body').on('click', '.ClickableClass', function() {
    alert("ClickableClass click event"); 
});
于 2012-04-25T16:07:53.723 回答
0

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

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

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

于 2012-04-25T16:05:55.463 回答
0 
$('#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 );
}

演示。

于 2012-04-25T16:08:53.620 回答
0

在这种情况下，您可以将点击事件绑定到您的跨度：

var mySpan =
    $('<span></span>')
        .addClass('ClickableClass')
        .bind('click', function() { alert('it works'); })
        .text('Should be clickable ' + i);
于 2012-04-25T16:16:31.033 回答
0

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

我会这样做：

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>");    
}
于 2012-04-25T17:37:59.830 回答