jquery mobile cancel click event in listview

Question

I have the following HTML snippet contained in a listview. Each element in the listview begins with a thumbnail.

<li>
<a href="javascript:alert("don't want to see this alert);" >
<img src="/images/testimage_thumb.png" onclick="displayImage('/gallery/testimage.jpg');">
<h4>Test Image</h4>
<p>Description of test Image</p>
</a>
</li>

<li>
<a href="javascript:alert("don't want to see this alert either);" >
<img src="/images/testimage2_thumb.png" onclick="displayImage('/gallery/testimage2.jpg');">
<h4>Second Test Image</h4>
<p>Description of the Second Test Image</p>
</a>
</li>

Works like a champ (at least as far as displaying). I want to be able to have the users click on the thumbnail to display a larger image and NOT trigger the underlying anchor link (which in this case displays an alert message).

I'm sure the answer lies with preventDefault(), just not sure how to bind the click event to a function that will allow me access to the event object. There will be multiple thumbs in the listview and the list is generated dynamically in response to another event. I use the pagebeforeshow() event when then page is loaded to generate the list.

Answer 1

Just add a click handler to your images.

$('img.ui-li-thumb').click(function(){
    alert('I am the image');
    return false;
});

This will bind a click handler to your images that have the ui-li-thumb class. Basically all the images that are thumbnails. Customize the selector further to apply it to a specific ul if you need to. This is a class added dynamically by jqm. return false will call

1. preventDefault (which in your case doesn't do anything because there is no event on the img tag.)
2. stopPropagation (which it what you want. This will stop the bubbling of the event - by bubbling I mean calling the handler of the a tag that you have your img in.)

The above code can be replaced by

$('img.ui-li-thumb').click(function(e){
    e.stopPropagation();
    alert('I am the image');
});

check here for a demo . Didn't have an actual image.

And going a little beyond what's been asked, check this What's the difference between event.stopPropagation and event.preventDefault?

UPDATE

$('img.ui-li-thumb').click(function(e){
    e.stopPropagation();
    alert(this.src);
});

UPDATE 2

My bad, the OP said that should consider dynamic elements.

$('div[data-role="content"]').on('click', 'a', function(){

    alert(1);
});

$('div[data-role="content"]').on('click', 'img.ui-li-thumb', function(e){
   //e.preventDefault();
    e.stopPropagation();
    alert(2);
});

This is the right one. After jquery 1.7 you can use on for this kind of binding (that will take care of the binding on dynamic elements).

I made a change though. Because of the different way on() works, I added e.preventDefault. Although the hanlder of the 'a' tag is not fired (so the alert(1) is not showing what so ever), it leaves the default behavior of a link tag to follow the link. So you add both of them, or you remove them, and add at the end

return false; 

check demo