Question

There was a recent question that I saw which was very helpful…

Insert additional image into checkbox element JQuery Mobile

I wanted to see if it’s possible to take it a step further.

In the above referenced post (I stole the image as well), an image was added to the checkbox which pops up a dialog or links somewhere else. That’s good, but there was a side-effect of that image, when the image itself was clicked, it also checked or unchecked the checkbox. It toggled the checkbox setting as if it weren’t there at all.

What I’m wondering is, is there a way to include an image on the checkbox AND have it be completely separate from the checkbox so it doesn’t check or uncheck the box.

Basically I have a list of to do items that are check boxes, and I’m trying to add an attached Note feature which you would get to by clicking the image… if it toggles the checkbox, that won’t work for this application.

If there is any jQuery / javascript magic that can be worked, please point me in the right direction.

Also, I would have preferred to keep this on the original post, but all I could see were ways to answer, sorry if I messed that up… I’m new.

Thank you!
-j

Answer 1

You need to use .stopPropagation(), which stops the event from bubbling up to the label.

Since you’re adding the anchor inside the label, you can use this:

$("label a").click(function(e){
    e.stopPropagation();    
});