Click on overlaped elements with click event

Question

I've got this 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>

Links do not cover all the image, but only some pixels.

As you may notice, the img is selectable (jQuery UI) and it's got three links as siblings. These links should run a function when clicked:

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

However, when I click over a link nothing happens. Links have greater z-index and are visible.

Any way to make this work or any clue about what may be going on?

Answer 1

Did you put your code inside $(document).ready()?

Also you can try:

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

or this

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

Answer 2

put the console.log before the dialog() it could be failing on that.

also, no need for the href's with javascript.

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

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

   event.preventDefault();

});