Question

Using jQueryUI. When users click on the delete_comment_button image, I want a dialog to appear that allows users to delete their comment.

The challenge: the image falls within a span (all the other dialogs on my site work fine). How do I specify an image within a span in the selector?

Code below; jsfiddle here: http://jsfiddle.net/GRVBz/1/

HTML

<span class="delete_comment_button"><img src="delete-button.png"></span>

<div id="delete_comment_dialog" title="Alert">
Are you sure you want to delete this comment?
</div>​

​jQuery

  $(function(){

    $( "#delete_comment_dialog" ).dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Cancel: function() { $( this ).dialog( "close" ); }
            }
    });
  });


    $('.delete_comment_button img span').click(function() { 
            $('#delete_comment_dialog').dialog('open'); 
            return false; 
    });

​

Answer 1

You just have your selector around the wrong way. The img is within the span, so use:

$('span.delete_comment_button img').click(function() { 
        $('#delete_comment_dialog').dialog('open'); 
        return false; 
});