2

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

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

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

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

我也试过给每个孩子一个 z-index，但列表项仍然没有响应。

我将不胜感激任何建议或指导。提前致谢！

4

1 回答 1

2

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

http://jsfiddle.net/LbqUC/

于 2012-09-25T06:16:17.787 回答