jQuery選擇：出訪點擊事件與特定的數據

Question

我想委託一個click事件到包含具有特定屬性的TD tr元素只有TR元素，即

<table> 
    <tr> 
    <td>product one</td> 
    <td>price</td> 
    </tr> 
    <tr> 
    <td data-imgurl="images/p2.png">product two</td> 
    <td>price</td> 
    </tr> 
</table> 

的目標是點擊該行並檢索該行的TD「data-imgurl」屬性值，即圖像的URI。這只是一個檢索該值的測試。最終我想讓點擊處理程序在隱藏的DIV或燈箱中顯示圖像，不知道我想要做什麼。

我的選擇（僅在於它會分配一個點擊到實際TD元素的作品：

$("table").delegate("tr td[data-imgurl]", "click", function(evt){ 
    alert($(this).attr("data-imgurl")); 
}); 

注意，從服務器端腳本動態創建的數據，「數據imgUrl的「屬性是基於該腳本中的邏輯，以便只有實際上具有圖像的產品纔會被分配一個」data-imgurl「屬性。也許我正在查看所有錯誤，並且應該以某種方式將數據附加到行本身，但這是違反直覺

或者我應該實際上推動圖像到一個隱藏的TD和分配它的類或rel屬性？ xists在頁面上，然後點擊顯示它？這個想法仍然是隻有那些具有實際圖像的產品才能點擊。

EDIT 好吧，我通過將數據推入實際行本身來解決這個問題。這樣做更有意義，每一行都是一個記錄。解決方案：

<table> 
    <tr> 
    <td>product one</td> 
    <td>price</td> 
    </tr> 
    <tr data-imgurl="images/p2.png"> 
    <td>product two</td> 
    <td>price</td> 
    </tr> 
</table> 

而jQuery的

$("table").delegate("tr[data-imgurl]", "click", function(evt){ 
    alert($(this).attr("data-imgurl")); 
}); 

Answer 1

是的，我把它壓入行。這些數據定義了產品，這是由一行，而不是一個單元格。

無論如何，如果您不使用delegate，則可以輕鬆地將click事件放到行上。

$('table tr td[data-imgurl]').parent().click(function (evt) { 
// on tr click 
}); 

隨着delegate，然而，事情變得混亂，我不能立即確定是否可以這樣做的。

Answer 2

您當前設置腳本的方式是附加事件的完美方式。您存儲數據的位置是任意的，但您訪問數據的方式可以爲您提供性能優勢。

我只會改變選擇器語法。由於您正在動態添加屬性「data-imgurl」，因此還需要添加一個css類。這可以是任何類型的選擇如下：

<td data-imgurl="images/p2.png" class="myProduct">product two</td> 

然後，您可以用下面的選擇訪問此：

$("table").delegate("tr td.myProduct", "click", function() { 
    alert($(this).attr("data-imgurl")); 
    //or if you have the metadata plugin 
    //alert($(this).metadata().imgurl); 
}); 

我之所以會改變選擇的方式是jQuery的檢查屬性。避免在選擇器中爲大量項目使用屬性是加速js執行的簡單方法。

懶惰加載圖像的想法（就像你現在這樣做）是一個好主意，特別是如果你有大量的產品。我喜歡你在那裏做了什麼;）

關於「委託」與直接將點擊事件附加到對象的說明：在這種情況下委託很好，建議如果您動態添加要點擊的行/單元格上。

Answer 3

我覺得選擇行是最佳的，以及... jQuery有非常強大的選擇，並且很多方法可以做同樣的事情，即：

$('tr:has(td[data-imgurl])').click(function(evt){ 
    // stuff here... 
});