桌面上的jQuery toggleClass無法正常工作

我試圖在鼠標懸停在桌面上時突出顯示錶格行。所以我使用jQuery的toggleClass()函數。值得一提的是，表格行最初並不存在，它們是在AJAX調用服務器之後創建的，然後插入表中。創建的錶行具有class =「table_row」。這是我的代碼...桌面上的jQuery toggleClass無法正常工作

$('.table_row').hover(function() { 
    event.preventDefault(); 
    $(this).toggleClass('highlighted'); 
});

由於某些原因，它不會工作，沒有任何反應。該行不會響應任何事件。下面是我使用創建表元素的代碼，而這來自上面的代碼之前...

$('tbody').prepend(
    '<tr class="table_row"><td>' + results + '</td></tr>' 
});

來源

2013-06-28 Amoeba

使用代表團動態元素 –

你防止'mouseenter'事件的默認行爲的原因嗎？ – Ian

嘗試使用：

$('tbody').on('mouseenter mouseleave', '.table_row', function() { 
    $(this).toggleClass('highlighted'); 
});

這使用.on()，從而爲所有的事件處理程序現有和未來的.table_row元素。 .hover()爲mouseenter和mouseleave事件綁定處理程序，所以這將與.hover()相同。

你也可以考慮使用CSS :hover僞類。但是，如果您需要重新使用.highlighted類，則這可能不是您正在查找的內容。這裏有一個例子：

tbody > tr.table_row{ /* regular styles */} 
tbody > tr.table_row:hover{ 
    // the current styles you have in .highlighted 
}

來源

2013-06-28 20:13:06 Joe

嘗試使用事件委託，用於動態創建的元素。您的懸停事件僅綁定到當時存在的元素，因爲您在運行時追加它們，您需要爲新添加的行再次綁定事件，或使用eventdelegation讓您的容器將事件委託給動態行可用時。

$('yourtableselector').on('mouseenter mouseleave', '.table_row', function() { 
    $(this).toggleClass('highlighted'); 
});

event-delegation

hover是用於mouseenter/mouseleave組合的虛擬事件。

Demo

來源

2013-06-28 20:13:14 PSL

使用CSS而不是JavaScript的對懸停事件簡約風格的變化。

#my_table > tbody > tr:hover { 
    background: yellow; 
}

但是如果你沒有使用JavaScript，我建議創建元素，並直接綁定到它。

由於懸停事件如此頻繁發生，因爲鼠標的動作，我想保持處理器儘可能靠近元素越好。

$('<tr class="table_row"><td>' + results + '</td></tr>') 
    .hover(function() { 
     event.preventDefault(); 
     $(this).toggleClass('highlighted'); 
    }) 
    .appendTo("tbody");

來源

2013-06-28 20:16:31

沒有足夠的jQuery。 ;-) – Ian

您可能需要使用'#mytable> TBODY> TR：hover'（在'>'可能是不重要的），不僅因爲他們是專門附加到'tbody'，可能意味着他們是區分和'thead'。可能不太重要 – Ian

@Ian：沒錯，我會更新。謝謝！ –

桌面上的jQuery toggleClass無法正常工作

回答

相關問題