Assign Click Event On List Bullet-images

I try to assign an onclick-event on list bullets, or rather the images replacing them, via JavaScript (or JQuery). I now how to get that work when the list-item is also clickable,

Solution 1:

I don't think the LI bullets are technically part of the DOM, so you can't assign click events to them.

This means you'll have to replace your UL/LI tags with something like <img class="li" src="bullet.gif" />....<br /> on every line, and assign click events to the images.

Solution 2:

In addition mblase75's answer, you can also hide the default bullets with CSS.

ul {
    list-style:none;
}

You could also wrap the <li> content in a span to separate it from the image, letting you handle click events separately.

Solution 3:

Is this like what you're looking for? http://simplebits.com/notebook/2004/07/18/clickable/

It uses CSS properties to "stretch" the linkable area to include the bullet list or image.