如何在單元格中添加包含可點擊的SPAN的表格

使用jQuery 1.7x，我在動態生成的標籤中創建了整個表格，這些標籤有幾列，其中一些列需要點擊。如何在單元格中添加包含可點擊的SPAN的表格

除了在動態內容上難以捉摸的點擊事件之外，一切似乎都很美妙。我剛剛學會了如何通過使用.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); 
}

得到這個還有，我不知道這是構建在飛行表的最佳方式，但它是最清楚的，我聽不懂，所以任何建議結束將不勝感激。 :)

來源

2012-04-25 GDP

您要添加的事件處理程序的對象，然後創建新的，絕不添加事件處理程序到新的。有兩種方法可以解決這個問題。首先是在每個事件之後添加事件處理程序，但是它重複了代碼。如果您知道您將擁有動態內容，則更好的方法是將事件處理程序添加到容器，並通過將選擇器傳遞給事件來告訴容器在特定類型的元素中查找click事件： http://jsfiddle.net/gregjuva/Hs4Kq/

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

來源

2012-04-25 16:07:53

啊，我看......我開始「得到」這整個jQuery的事情，但語法本身之後，其中/時似乎總是跳閘我向上。我無法表達我非常欣賞像你這樣的人願意伸出援助之手給我們這些仍在努力的人。另外，我提供的代碼是否適合添加多個TD（其中大約10個），或者是否有比此示例代碼更好的方法來理解事件處理 – GDP 2012-04-25 16:17:53

樂於協助 - 這些論壇也幫助我大大提高了啓動速度我很高興在可能的情況下返還該優惠。關於你的代碼方法，它是否是最好的方式取決於你的最終目的，但是如果你正在尋找的是一個簡單的方法讓用戶能夠點擊表格行並激發一個事件，那麼這種方法是有效的精細。當你將很多東西附加到同一個容器中時，你肯定會想要將事件處理程序附加到容器上，就像我們在這裏爲每個項目出於性能原因而做的一樣。 – 2012-04-25 16:31:30

其中在.on()函數的參數的順序問題：

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

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

來源

2012-04-25 16:05:55

$('#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.

來源

2012-04-25 16:08:53

在這種情況下，你可以綁定點擊事件，您跨度：

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

來源

2012-04-25 16:16:31

啊，.bind事件。這總是「迷惑」了我，也許是因爲我看到它用到的例子。我不明白爲什麼要將函數綁定到綁定本身。你能綁定到其他地方已經定義的事件嗎？ – GDP 2012-04-25 16:31:20

只是稍微更優化的方法，你可以緩存你的變量，並消除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>");  
}

來源

2012-04-25 17:37:59

如何在單元格中添加包含可點擊的SPAN的表格

回答

相關問題