JQuery: How to detect clicks from icons inside li?

Question

I have an icon inside a list, id like to just be able to detect the double click on the icon - so i can delete the list, how is this possible (JQuerry Sortable)

$("#roleList").dblclick(function(e) {
            var text = $(e.target).html();
            $(e.target).fadeOut('slow', function() {
                $("#deleteList").append(e.target);
            });
        });


<ul id="roleList" class='droptrue'>

                    <li class="ui-state-default" id="20~Role 1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input id="20" name="20" type="text" value="Director General" /></li>                                                                             

                    <li class="ui-state-default" id="1~Role 2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input id="1" name="1" type="text" value="Director" /></li>

so i want to detect the click on the "ui-icon ui-icon-arrowthick-2-n-s" class so i can trigger a fadeout and "delete" that list item.

I'm guessing if i can do that, this wont work:

var text = $(e.target).html();
        $(e.target).fadeOut('slow', function() {
            $("#deleteList").append(e.target);
        });

ill have to do a e.target.parent? cuz id like to fadeout the ENTIRE li and not just the icon..

Any help would be appreicated

Answer 1

You can try this one :

$(".ui-icon").live("dblclick", function(){
  $(this).remove();
});

This will attach a double click event to any element with a class ui-icon which when executed will remove the element. If you want to delete the parent li element with a fade out:

$(".ui-icon").live("dblclick", function(){
      $(this).parent('li:first').fadeOut('slow', function(){
        $(this).remove();
       });
 });

I hope this is what you are looking for