This is what ultimately made my day. And hopefully it should help others as well.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Project</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var dd = $.Deferred();
var jqd = $.Deferred();
$.when(dd, jqd).done(doInit);
</script>
<script src="js/MyOwn.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" src="js/cordova-2.6.0.js"></script>
<script type="text/javascript">
$(document).bind('mobileinit', function () {
jqd.resolve();
});
document.addEventListener('deviceready', deviceReady(), false);
function deviceReady() {
dd.resolve();
document.addEventListener("menubutton", function(e) {
e.preventDefault();
MyCustomMenuFunction();
}, false);
document.addEventListener("backbutton", function(e) {
e.preventDefault();
MyCustomBackFunction();
}, false);
onDeviceReady();
}
function doInit() {
onDeviceReady();
}
</script>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.min.css">
</head>
Two thing to be noted: - As I am new to this stuff, I was not adding cordova js earlier. After I added cordova-2.6.0.js then only menubutton started working. Whereas backbutton started working after I added cordova.js as well. - "deviceReady()" works but "deviceReady" doesn't. Don't know why.