Нажмите на перекрывающиеся элементы с событием щелчка

Question

У меня есть этот 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), и у него есть три ссылки как родные. Эти ссылки должны запускать функцию при нажатии:

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

Однако, когда я нажимаю на ссылку, ничего не происходит. Ссылки имеют больший z-индекс и видны.

Есть ли какой-нибудь способ заставить это работать или какая-либо подсказка о том, что может происходить?

Answer 1

поместите console.log перед диалоговым окном (), на котором это может произойти сбой.

также, нет необходимости в href с javascript.

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

$(".btnImgDel").click( function(event) {

   event.preventDefault();

});

Answer 2

Вы поместили свой код в $ (document) .ready ()?

Также вы можете попробовать:

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

или это

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