CODEWITHSUNDEEP
javascriptjqueryhtmlmouseeventz-index
kmy
kmy

Reputation: 21

How do I trigger a mouseenter (or any mouse) event on list items within a div with a z-index?

Every time I click on the list items only the z-index layer gets the mouse event. CSS has no trouble detecting the mouse hovering over the list item but I need jquery to display an image after retrieving the background-image from the list item's css.

For your convenience, I recreated it at jsFiddle: http://jsfiddle.net/VaDb6/

I've also tried this: jQuery hover problem due to z-index

But this just made everything else clickable in the back, which is exactly what I don't want and the reason why I made the div with a z-index.

I've also tried giving each child a z-index but still no response from the list items.

I will greatly appreciate any suggestions or guidance. Thanks in advance!

Upvotes: 2

Views: 375

Answers (1)

methodofaction
methodofaction

Reputation: 72415

This has nothing to do with the z-index, what is happening is that the events are binded when your page loads, and the freshly inserted divs don't have events attached to them. Here's how to fix it:

$('div.gallery_shots li').on('click', function () {
    // take the ancestor's html
    var html = $(this).parent().parent().next().html();

    $('div#layerZ').html(html + '<div id="debug"></div>').show();
});

$('div#layerZ').on('click', function () {
$('div#debug').append('layerZ...');
});


$('div#layerZ')
    .on("click", "li", function(e) {
        e.stopPropagation();
        alert('li clicked');
    })
    .on("mouseenter", "li", function(e) {
        e.stopPropagation();

    //$('div#layerZ div.gallery_pictures li.current').removeClass('current');
    //$(this).addClass('current');

    //var url = $(this).css('background-image');
    //url = url.replace('url(', '').replace('-thumb', '').replace(')', '');

    //$('div#layerZ div.large_gallery').html('<img src="'+url+'"></img>');

      $('div#debug').append('mouseenter event success!!!<br />');
});

With $('div#layerZ').on("click", "li", function(e) {...} you're telling the parent to listen on clicks done specifically on li. Since #layerZ exists at load time there's no problem binding the event.​

http://jsfiddle.net/LbqUC/

Upvotes: 2

Related Questions