如何在带有z索引的div中的列表项上触发鼠标输入(或任何鼠标)事件？

Question

每次我单击列表项时，只有z索引层获得鼠标事件。css可以毫不费力地检测到鼠标悬停在列表项上，但在从列表项的CSS检索背景图像后，我需要jquery来显示图像。

为了方便起见，我在jsFiddle：http://jsfiddle.net/VaDb6/上重新创建了它

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

但这只是让后面的所有其他东西都可以点击，这正是我不想要的，也是我用z索引创建div的原因。

我还试着给每个孩子一个z索引，但仍然没有从列表项得到响应。

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

Answer 1

这与z索引无关，发生的情况是在页面加载时绑定事件，并且新插入的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在加载时就存在，因此绑定事件没有任何问题。​

http://jsfiddle.net/LbqUC/