javascript - 如何在具有 z 索引的 div 内的列表项上触发 mouseenter(或任何鼠标)事件？

Question

每次我单击列表项时，只有 z-index 图层才会获取鼠标事件。 CSS 检测鼠标悬停在列表项上没有问题，但我需要 jquery 在从列表项的 css 检索背景图像后显示图像。

为了您的方便，我在 jsFiddle 重新创建了它:http://jsfiddle.net/VaDb6/

我也尝试过这个: jQuery hover problem due to z-index

但这只是让后面的其他所有内容都可以点击，这正是 我不想要这也是我用 z-index 制作 div 的原因。

我还尝试为每个 child 提供一个 z-index，但列表项仍然没有响应。

我将非常感谢任何建议或指导。提前致谢!

Answer 1

这与 z-index 无关，发生的情况是页面加载时绑定(bind)了事件，并且新插入的 div 没有附加事件。修复方法如下:

$('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 />');
});

使用 $('div#layerZ').on("click", "li", function(e) {...} 您告诉父级监听完成的点击特别是在 li 上。由于 #layerZ 在加载时存在，所以绑定(bind)事件没有问题。​

http://jsfiddle.net/LbqUC/