单击带有单击事件的重叠元素答案

【问题标题】：Click on overlaped elements with click event单击带有单击事件的重叠元素
【发布时间】：2009-04-23 03:05:12
【问题描述】：

我有这个 DOM：

<li>
    <img class="ui-selectee" src="../img/thumbs/80x80_1280_wallpaper.jpg" style=""/>
    <input type="hidden" value="3"/>
    <a class="btnImgDel" title="Eliminar" href="javascript:void(0)">Eliminar</a>
    <a class="btnImgRen" title="Renombrar" href="javascript:void(0)">Renombrar</a>
    <a class="btnImgZoom" title="Ampliar" href="javascript:void(0)">+</a>
</li>

链接不会覆盖所有图像，而只是一些像素。

您可能注意到，img 是可选择的（jQuery UI），它有三个同级链接。这些链接在点击时应该运行一个函数：

$('.btnImgDel').live('click',function(){
    $('#dialogDeleteImg').dialog('open');
    console.log('click');
});

但是，当我点击一个链接时，什么也没有发生。链接具有更大的 z-index 并且可见。

有什么方法可以使这项工作或任何线索知道可能发生的事情吗？

【问题讨论】：

正如 deviant 的回答所暗示的那样，您的问题是通过将 href="javascript:void(0)" 放在那里，您可以避免发生任何事情的机会。

标签： jquery jquery-ui

【解决方案1】：

将 console.log 放在 dialog() 之前可能会失败。

另外，不需要使用 javascript 的 href。

<a href="#"></a>

<script>
    $(".btnImgDel").click(function (event) {
        event.preventDefault();
    });
</script>

【讨论】：

是的，这就是解决方案。他正在使用现场方法，但您可以理解这个想法，这就是 IMO 的重要内容。 ;) 正如注意......你可以使用'return false;'而不是 'event.preventDefault()' - 输入更少。
我遇到了 return false 跨浏览器的问题，所以已经切换到 preventDefault() 并且没有任何问题。 ;)

【解决方案2】：

您是否将代码放入 $(document).ready() 中？

你也可以试试：

$(document).ready(function() {
  $('.btnImgDel').click(
    function(){
      $('#dialogDeleteImg').dialog('open');
      console.log('click');
    });
});

或者这个

<span class="btnImgDel" title="Eliminar">Eliminar</span>

【讨论】：

是的，它在 $(document).ready() 中。我不能使用 $('.btnImgDel').click()。 a.btnImgDel 是动态创建的，这就是我使用 live() 的原因