Is it possible to trigger a jQuery click event on a background image in a list?

Question

I have an unordered list of items, something like this, abbreviated for brevity:

<div id="elementsContainer">
  <ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
  </ul>
</div>

I have a list in style, but these 3 styles deal with background images for list items:

#elementsContainer ul li {
    list-style:none;
}
#elementsContainer a {
    background: transparent url(/images/icons/bullet_delete.png) no-repeat 5px 50%;
}

#elementsContainer a:hover,
#elementsContainer a:focus,
#elementsContainer a:active {
    background:#fff url(/images/icons/delete.png) no-repeat 5px 50%;
}

The list looks great - it places a small delete icon to the left of the text for each list item. However, I want to use jQuery (1.3) to handle click events for each item, and I would like to have separate functionality between the background image of the list item and the text of the list item. If I click on the image, I want to delete the item. If I click on the text, I want to edit the item.

I started using something like this:

$("a").live("click", function(event){
  alert( $(this).text() );
});

$(this) "event", , .

, , "img" . , . , .

!

Answer 1

IMG. , , LI, . IMG ( A ) .

, , IMG LI, - , / .

Answer 2

, DOM . , , a (, , ), onclick , , .

img ( - ) , .

Answer 3

what you could do for the desired effect is to place a space with some spaces in the area that will ultimately be displayed as a result of deletion, and then intercept the event by pressing this range.

Answer 4

Place an element over it and steal this event.