Question

I have a list which has a jquery handler for a mouse click. I need to place an image within the list, but need a mouse click on the image to perform a different function. I was thinking some sort of unbind on mouseover and bind on mouseout but can not get it to work. Is there an easier method?

The problem I am having is it performs the two clickable events when I click the image.

JS

$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function () {
    alert("This is a click on the list")
}
});
});

html

<li id="tab" runat="server">Keywords <a class="fake-link" onclick="alert("This is an image click")"><img id="icon" src="images/icon.gif" style="float: right; visibility:visible"/></a></li>

So any ideas how I can only have the alert from the image click? Thanks in advance!

Answer 1

$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function (e) {
if($(e.target).attr('id')==='icon')){
//call that function which runs on image click
}
else {
    alert("This is a click on the list")
}
}
});
});

Edit: As puppybeard suggested here is another way if you want to have different function to run for all images in the li’s

$(function () {
    var items = $('#v-nav>ul>li').each(function (index) {
    $(this).click(function (e) {
    if($(e.target).is('img'))){
    //call that function which runs on image click
    }
    else {
        alert("This is a click on the list")
    }
    }
    });
    });