Prevent href because of taphold dialog

Question

I dynamically generate a list like this:

$("#list").append("<li><a class='touchable' id=" + results.rows.item(i).id + " href='#list' onclick='showDetailsList(" +  results.rows.item(i).id + ");'>" + results.rows.item(i).name + "</a></li>");

As you can see I add the class 'touchable' to the a link. Now I have:

$(document).on("taphold",".touchable",function(e){
    e.preventDefault();
    e.stopPropagation();
    $(this).simpledialog2({
        mode:"blank",
        headerText:"Image Options",
        showModal:false,
        forceInput:true,
        headerClose:true,
        blankContent:"<ul data-role='listview'><li><a href=''>Send to Facebook</a></li><li><a href=''>Send to Twitter</a></li><li><a href=''>Send to Cat</a></li></ul>"
    });
});

I added 'e.preventDefault()'. But when I tap the link for some seconds the dialog shows but when I release the click it automatically jumps to the other page.

I want to have the option to make a choice in the dialog and don't go to the other page. How can I do this?

Answer 1

What I think is happening is that when you release the click, the click event will fire on the link and you will jump to the other page. What you could do is to bind a click event handler to $(this) inside the taphold event handler which will prevent the event bubbling.

So something like this

$(this).one("click", function(e) { // one to only handle one (the next) click event
  e.preventDefault();
  e.stopPropagation();
});

inside your taphold handler should work.