Kann ein jQuery click-Ereignis auf einem Hintergrundbild in einer Liste ausgelöst werden?

Question

Ich habe eine ungeordnete Liste von Elementen, so etwas wie dies, der Kürze halber verkürzt:

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

ich die Liste haben gestylt, aber diese 3 Arten befassen sich mit Hintergrundbildern für die Listeneinträge:

#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%; 
} 

Die Liste sieht gut aus - es wird ein kleines Löschsymbol links neben dem Text für jedes Listenelement angezeigt. Allerdings möchte ich jQuery (1.3) verwenden, um die Klickereignisse für jedes Element zu behandeln, und ich möchte separate Funktionalität zwischen dem Hintergrundbild des Listenelements und dem Text des Listenelements. Wenn ich auf das Bild klicke, möchte ich das Objekt löschen. Wenn ich auf den Text klicke, möchte ich den Artikel bearbeiten.

Ich begann so etwas wie dies mit:

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

Aber ich in $ sehe nichts (this) oder „Ereignis“, das ich feststellen kann, ob ich den Text oder das Bild am klicken.

Ja, ich weiß, ich könnte einfach ein separates "img" -Tag haben und den Klick darauf separat behandeln. Ich werde diesen Weg gehen, wenn das die einzige Option ist. Ich möchte nur wissen, ob es eine Möglichkeit gibt, das Hintergrundbild zu bearbeiten.

Vielen Dank im Voraus!

Answer 1

Gehen Sie mit dem IMG-Tag. Das Beste, was Sie tun konnten, war ein Klick auf das LI-Element selbst, was zu einem Chaos führen würde. Ein IMG-Tag (und sogar ein A-Tag um es für semantische Güte und schön degradierende Seiten) würde am besten funktionieren.

Sie sollten nicht viele Probleme haben, es so zu gestalten, dass es mit einem IMG innerhalb der LI gleich aussieht. Ich mache ständig etwas ähnliches in Listen, wo ich Symbole zum Löschen/Bearbeiten brauche.

Answer 2

Sie können einen Klick auf das Hintergrundbild nicht unterscheiden, da es für das DOM nicht wirklich vorhanden ist. Alles, was Sie haben, ist das Element a selbst (das zufällig mit Ihrem Hintergrundbild dargestellt wird), und sein onclick-Handler wird ausgelöst, solange Sie irgendwo innerhalb des Tags klicken, Text oder nicht.

Es ist wahrscheinlich am besten, ein img-Tag (oder ein anderes separates Tag) zu verwenden und den Klick darauf separat zu handhaben, wie Sie in Ihrem Bericht abgeschlossen haben.

Answer 3

was Sie für den gewünschten Effekt tun könnten, ist eine Spanne mit einigen Leerzeichen in dem Bereich, in dem das Löschbild schließlich erscheinen wird, und dann haken Sie das Ereignis auf den Klick dieses Bereichs.

Answer 4

Setzen Sie ein Element darüber und stehlen Sie registrieren das Ereignis damit.