I am trying to set click handler for an anchor tag in jQuery mobile with via reference to the handler function inside the anchor tag (I need to do it this way for reasons that are cumbersome to get into). As illustrated in the code below when I pass a variable to the handler function that is an integer it works but when I pass it a string it does not. Can anyone explain whey this is?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
//The Line Below works
$("#main").html('<a href="#" data-theme="a" onclick="test(' + '2' + '); return false" rel="external" data-role="button">click test</a>');
/*
//The Lines Below Do not work
//$("#main").html('<a href="#" data-theme="a" onclick="test('+'hello world'+'); return false" rel="external" data-role="button">click test</a>');
var test = 'hello world';
//$("#main").html('<a href="#" data-theme="a" onclick="test('+test+'); return false" rel="external" data-role="button">click test</a>');
*/
$("#main").trigger('create')
});
function test(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content"></div>
</div>
</body>
try this ::