Question

I have a Jquery Mobile listview with a delete button next to an link in each list item. When I click the delete button, the onclick event fires, the delete function runs but then the href is also followed, even though the button isn’t nested within the href. I have added return false to the button to see if that would help but it doesn’t! HELP!

Here’s the code I’m using to dynamically populate my list….

$('#roomsList').append('<li><img src="img/delete-2x.png" class="delete" onClick="deleteRoom(\'' + currentRow.roomtype + '\',\'' + propertyID + '\'); return false;" /><a href="inventory.html?roomtype='+currentRow.roomtype+'&id='+propertyID+'" id="'+currentRow.roomtype+'">' + currentRow.roomtype + '</a></li>');

Answer 1

There shouldn’t be any problems. Look at this example: http://jsfiddle.net/Gajotres/WEmNG/. I have created it two days ago for someone else but it is similar to your question. Instead of delete button I am showing custom checkbox on a listview. If you click a listview it will forward you to another page but if you click on the custom checkbox it will only activate event on chechbox.

Use my example to create a working delete button on a listview.

This is an example of event I am using on my custom checkbox:

$('.checkBoxLeft').bind('click', function(e) {
   if($(this).find('input[type="checkbox"]').is(':checked')){
       $(this).removeClass('checked').addClass('not-checked');
       $(this).find('input[type="checkbox"]').attr('checked' , false);
   } else {
       $(this).removeClass('not-checked').addClass('checked');             
       $(this).find('input[type="checkbox"]').attr('checked' , true);
   }
});