链接没有出现在使用jquery悬停

Question

I want to make a div visible when hovering another div. Now, I know this can be implemented using simply jquery but its not working. I am populating a list using javascript as given below :

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;
}

Now what I want that when hovering over coachingLinkDisplay, batchButton should appear (whose display is none initially) . So I wrote the code :

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

But the code is not working. It seems as the list is being populated using JS, may be the above jquery snippet is failing as I have tried the snippet for normal div and is working properly. So, I tried to use css approach as I read in various blogs:

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

But again no luck..is there any problem in above css code? Please help me out here...how to implement my requirement...?

Answer 1

You need to delegate the hover function. This is because the event handler is only bound to elements available during document ready.

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

Replace document with the closest static parent element.