鏈接沒有出現在懸停使用jquery

我想讓一個div在懸停另一個div時可見。現在，我知道這可以使用簡單的jQuery來實現，但它不起作用。鏈接沒有出現在懸停使用jquery

function coachingLink(data, list) { 
    list = list 
    + '<div class="**coachingLinkDisplay**"><p class="coachingLink" align="left" style="color:#CD3700;">' 
    + data.coachingName 
    + '</p><br/>' 
    + '<p class="title" style="color:black;font-size:14pt;">Subjects : ' 
    + subjects + '</p><br/><p class="content" align="left"></b>' 
    + data.description + '</p></div></a><a href="batch.html?coachingId=' 
    + data.coachingId 
    + '" class="**batchButton**"><b>View Batches</b></a>'; 

    return list; 
}

現在我想的是徘徊在coachingLinkDisplay時，batchButton應該出現（其顯示沒有最初）：下面給出我填充使用JavaScript列表。所以我寫了代碼：

$(document).ready(
    function() { 
    $('.coachingLinkDisplay').hover(function() { 
    $('.batchButton').css('display', 'block'); 
    }); 
});

但是代碼不起作用。這似乎是列表正在使用JS填充，可能是上面的jQuery代碼片斷失敗，因爲我已經嘗試了正常的div的代碼段，並正常工作。所以，我試圖用CSS的方法，我在不同的博客閱讀：

.coachingLinkDisplay:hover + .batchButton{ 
    display:block; 
}

但同樣沒有luck..is上面CSS代碼的任何問題嗎？請在這裏幫助我......如何實現我的要求......？

來源

2013-07-21 vlad halmer

您需要委託懸停功能。這是因爲事件處理程序僅綁定到文檔準備期間可用的元素。

$(document).on('mouseover', '.coachingLinkDisplay', function(){ 
    $('.batchButton').css('display', 'block'); 
});

用最接近的靜態父元素替換document。

來源

2013-07-21 14:24:25 Ohgodwhy

這工作......但我無法理解如何...我的意思是你的方法和我的區別是什麼..？ –

@vladhalmer這是因爲您將元素動態添加到DOM，這意味着它們在頁面加載時不可用。靜態事件處理程序僅綁定到'$（document）.ready（）'觸發時可用的元素。如果元素不存在，那麼你需要一個動態事件處理程序，這正是'.on（）'在首先提供一個靜態元素時所做的，I.E. '$（document）'，然後使用'.coachingLinkDisplay'作爲你想要委託動態事件的元素。 – Ohgodwhy

謝謝你的澄清... :) –

鏈接沒有出現在懸停使用jquery

回答

相關問題