jquery - "on" preventDefault

Question

What am I missing here?

Please note: jQuery MOBILE is used

• DEMO using preventDefault

• DEMO using return false

If I use preventDefault the page loads as if I had just links and no script, when I change to return false (which I always used to use on the plain JS onclick event handler), it works as expected. I have already looked through other posts and all use .click and all suggest preventDefault.

$(document).ready(function() {
  $("#leftdiv a").on("click",function(e) {
    $("#rightDiv").load(this.href);
    return false; // I was sure preventDefault would work
  });
});

HTML

<div id="leftdiv" style="position:absolute;padding-right:5%; overflow:scroll;">
<a href="page1.htm">Launch page 1</a><br />
<a href="page2.htm">Launch page 2</a>
</div>

<div id="rightDiv" style="padding-left:30%"></div>

Answer 1

e.preventDefault();

didn't work ?

• http://api.jquery.com/event.preventDefault/

$('a').on("click",function(e){
     //do something
     e.preventDefault();
});

Putting e.preventDefault(); on the top or on the end of your code does not matter normally. There is also the method e.stop() I guess. But why don't you stick with return false; when it's working for you ?

From jQuery mobile documentation:

Canceling an elements default click behavior

Applications can call preventDefault() on a vclick event to cancel an element's default click behavior. On mouse based devices, calling preventDefault() on a vclick event equates to calling preventDefault() on the real click event during the bubble event phase. On touch based devices, it's a bit more complicated since the actual click event is dispatched about 300ms after the vclick event is dispatched. For touch devices, calling preventDefault() on a vclick event triggers some code in the vmouse plugin that attempts to catch the next click event that gets dispatched by the browser, during the capture event phase, and calls preventDefault() and stopPropagation() on it. As mentioned in the warning above, it is sometimes difficult to match up a touch event with its corresponding mouse event because the targets can differ. For this reason, the vmouse plugin also falls back to attempting to identify a corresponding click event by coordinates. There are still cases where both target and coordinate identification fail, which results in the click event being dispatched and either triggering the default action of the element, or in the case where content has been shifted or replaced, triggering a click on a different element. If this happens on a regular basis for a given element/control, we suggest you use click for triggering your action.

function() {
  return false;
}

// IS EQUAL TO

function(e) {
  e.preventDefault();
  e.stopPropagation();
}

Source: http://css-tricks.com/return-false-and-prevent-default/

It also seems that .on() isn supported also as document.ready is not supported

Source: http://jquerymobile.com/test/docs/api/events.html