如何在jquery的行中添加一個mouseover事件？

Question

我有一個動態填充表，並想

(mouseover="style.backgroundColor='#E1EBF4'") 

添加鼠標懸停功能，以我的錶行同時被添加的數據行。

function addRecentData(data) { 
    $('#newTable tr:last').after('<tr><td class="name"></td><td class="id"></td></tr>'); 
    var $tr = $('#newTable tr:last'); 
    $tr.find('.name').html(data.Name); 
    $tr.find('.id').html(data.Id); 
} 

Answer 1

編輯：注意，如果你不關心IE6的支持，您可以使用CSS :hover僞選擇更改背景。這應該是第一個考慮因素。

#newTable ​tr:hover { 
    background: #E1EBF4; 
}​ 

---

鑑於當前的代碼，你可以只用你的$tr參考表：

function addRecentData(data) { 
    $('#newTable tr:last').after('<tr><td class="name"></td><td class="id"></td></tr>'); 
    var $tr = $('#newTable tr:last'); 
    $tr.find('.name').html(data.Name); 
    $tr.find('.id').html(data.Id); 
    $tr.mouseover(function() { 
     $(this).css('backgroundColor','#E1EBF4'); 
     // this.style.backgroundColor = '#E1EBF4'; // or you could do this 
    }); 
} 

另一種方法是使用inserAfter()代替after()，並立即分配變量。

function addRecentData(data) { 
    var $tr = $('<tr><td class="name"></td><td class="id"></td></tr>') 
        .insertAfter('#newTable tr:last'); 
    $tr.find('.name').html(data.Name); 
    $tr.find('.id').html(data.Id); 
    $tr.mouseover(function() { 
     $(this).css('backgroundColor','#E1EBF4'); 
     // this.style.backgroundColor = '#E1EBF4'; // or you could do this 
    }); 
} 

或者，如果每個<tr>應該得到的鼠標懸停，你可以使用在#newTable.delegate()把鼠標懸停的照顧。

$('#newTable').delegate('tr', 'mouseover', function() { 
    $(this).css('backgroundColor','#E1EBF4'); 
    // this.style.backgroundColor = '#E1EBF4'; // or you could do this 
}); 

現在<tr>元素會自動獲取你想要的時候都添加到表的功能。

• http://api.jquery.com/delegate/

Answer 2

你應該堅持通過jQuery將您的活動。您可以使用.live()事件綁定方法將事件處理程序置於之前添加行。另外，如果你想有一個懸停效果，你與的mouseenter和鼠標離開，這jQuery提供了不已經支持它的瀏覽器更好：

$('#newTable tr').live('mouseenter', function() { 
    $(this).css('backgroundColor', '#E1EBF4'); 
}).live('mouseleave', function() { 
    $(this).css('backgroundColor', ''); 
}); 

這也比結合更高效當它被動態地添加到每個單獨的元素時。

Answer 3

如前所述，您可以使用.live

$('#newTable tr').live('mouseenter', function() { 
    $(this).css('background','#E1EBF4'); 
}).live('mouseleave', function() { 
    $(this).css('background',''); 
}); 

確保您使用的mouseenter和鼠標離開該行之前，沒有鼠標懸停/鼠標移開或進出子元素的移動以及何時會觸發並你會看到背景閃爍來回變化。