Is it only allowed to bind 1 event to 1 thing? What I mean is, that I have 2 js files I want to initialize on the same page load.
So I have tried the following:
js1 / Mapmode.js:
$(document).ready(function () { initMapModeContent() });
function initMapModeContent(){
alert('test');
initPageHeader();
var oldHTML = document.getElementById('mapmodeContent').innerHTML;
var newHTML = oldHTML + '<div><a href="pages/Beskeder.jsp#beskeder" id="mapLink" name="mapLink"><img id="mapLinkImage" alt="a map which links to the beskeder" src="images/beskeder.png"/></a></div>';
document.getElementById("mapmodeContent").innerHTML=newHTML;
}
js2 / PageHeader.js:
$(document).on("pageinit", "#mapmode", function(event) {
initPageHeader();
});
$(document).on("pageinit", "#beskeder", function(event) {
initPageHeader();
});
function initPageHeader() {
var id = document.getElementById('header').parentNode.id;
//TODO getdata with the id(page we are currently on).
$("#header").html(function(index, originalMarkup) {
return '<a data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" ' + 'data-corners="true" class="ui-btn-left ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all" href="#" ' + 'data-rel="back" data-role="button"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">' + '<img src="../images/back.png" alt="back" align="middle" vspace="2"></span></span></a>' + '<h1 aria-level="1" role="heading" class="ui-title">' + '<img src="../images/main_header.png" alt="logo" align="middle" vspace="2">' + '</h1><a data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true"' + 'data-corners="true" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-inline ui-shadow ui-btn-corner-all" ' + 'href="#first" data-role="button" data-inline="true"><span class="ui-btn-inner ui-btn-corner-all">' + '<span class="ui-btn-text">' + '<img src="../images/home.png" alt="picture to take you to the first page" align="middle">' + '</span></span></a>';
});
}
html5:
<%--
Document : mapMode
Created on : Jul 12, 2012, 10:36:22 AM
Author : ame
--%>
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="mapmode" name="mapmode">
<div data-role="header" id="header" name="header">
<p>TEEEST</p>
</div><!-- /header -->
<div data-role="content" id="mapmodePageContent" name="mapmodePageContent">
<p>I'm the first page in mapMode!.</p>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="../js/Mapmode.js"></script>
<script type="text/javascript" src="../js/PageHeader.js"></script>
</body>
</html>
I just can’t find in documentation that it shouldn’t work? any suggestions for how it can be made, if it is not legal, or anyone that can spot my error.
It works in PageHeader.js but not in Mapmode.js, which is why I ask this.
.on()attach an event to a selector.You can assign any number of events to it like click, submit etc…
But I think it is not wise to assign same event more than once to the same element. I think only the last attached event will fire.