My simple mobile app has 3 pages all demarcated with divs/ data-role="page" and within the same document (.html). The pages load up perfectly but if I navigate to the 2nd page, a very simple click event on a button does not work.
In the I have the following within script tags:
$('#igetdetails').click(function () {
alert("hello");
})
igetdetails being the id of the button. The alert never pops up.
When I place this code within the pageinit event of that page however, it pops up immediately the page is loaded.
This tells me there must be something very simple I'm missing out but after 8 hours of strain and pain I'm reaching out for help.
Here's the full head section:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css"
/>
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js">
</script>
<script src="my.js">
</script>
<script>
// Invoice = new Object();
$( '#page1' ).live( 'pageinit',function(event){
//alert( 'This page was just enhanced by jQuery Mobile!' );
// Ajax Called When Page is Load/Ready (Load Customers)
jQuery.ajax({
url: 'list_customers.php',
global: false,
type: "POST",
dataType: "xml",
async: false,
success: populateCustomers
});
jQuery.ajax({
url: 'list_salesmen.php',
global: false,
type: "POST",
dataType: "xml",
async: false,
success: populateSalesmen
});
$("#iinv_customer").bind( "change", function(event, ui) {
Invoice.CustomerID = $('#iinv_customer').val();
});
$("#iinv_salesman").bind( "change", function(event, ui) {
Invoice.SalesmanID = $('#iinv_salesman').val();
});
$("#iinv_date").bind( "change", function(event, ui) {
Invoice.Date = $('#iinv_date').val();
});
$("#iinv_no").bind( "change", function(event, ui) {
Invoice.invno = $('#iinv_no').val();
});
$("#iinv_add").bind( "click", function(event, ui) {
$('#iinv_customer').selectmenu('disable');
$('#iinv_salesman').selectmenu('disable');
$('#iinv_no').textinput('disable');
$('#iinv_date').textinput('disable');
$.mobile.changePage("#page4");
});
$("#iinv_cancel").bind( "click", function(event, ui) {
$('#iinv_customer').selectmenu('disable');
$('#iinv_salesman').selectmenu('disable');
$('#iinv_no').textinput('disable');
$('#iinv_date').textinput('disable');
//$('#page1').reset();
location.reload();
});
});
$( '#page4' ).live( 'pageinit',function(event){
//alert( 'This page was just enhanced by jQuery Mobile!' );
//$('#iSelectedCustomer').html($('#iinv_customer').val());
$('#iSelectedCustomer').html($("#iinv_customer option[value='" + $('#iinv_customer').val() +"']").text());
// document.getElementById("iSelectedCustomer").innerHTML = $('#iSelectedCustomer').html();
//var element = document.getElementById('iSelectedCustomer');
//alert(element.value);
//element.value = $('#iinv_customer').value;
//alert(element.value);
// var selected = $(#iinv_customer).val;
// $('#iSelectedCustomer').val(selected);
jQuery.ajax({
url: 'list_products.php',
global: false,
type: "POST",
dataType: "xml",
async: false,
success: populateProducts
});
});
$('#igetdetails').click(function ()
{
alert("hello");
//$("#ili_prod").bind( "change", function(event, ui) {
//var data = { prod: 12};
var data = { prod: $("#ili_prod").val()};
// prodid = $(this).attr('value');
jQuery.ajax({
url: 'get_products_details.php',
type: "POST",
dataType: "xml",
data:data,
async: false,
success: populateProductsDetails
});
alert($("#ili_prod").val());
alert("hello");
});
</script>
</head>
You are running the JS code before the DOM element exists. Since you are using a multi-page template you can just place the code in your question inside a document.ready event handler (be aware that when using single-page-templates this is not a good idea, you should instead use delegated page events).
Just wrap your code like this:
$(function () {
...
$('#igetdetails').click(function () {
...
});