我的简单移动应用程序有 3 个页面，全部用 divs/data-role="page" 划分，并且位于同一文档 (.html) 中。页面加载完美，但如果我导航到第二页，按钮上的一个非常简单的单击事件将不起作用。
在脚本标签中我有以下内容:
$('#igetdetails').click(function () {
alert("hello");
})
igetdetails 是按钮的 id。警报永远不会弹出。
但是，当我将此代码放入该页面的 pageinit 事件中时，它会在页面加载后立即弹出。
这告诉我一定有一些非常简单的事情我错过了，但经过 8 小时的紧张和痛苦后，我正在寻求帮助。
这是完整的头部部分:
<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>
最佳答案
您正在 DOM 元素存在之前运行 JS 代码。由于您使用的是多页面模板，您只需将问题中的代码放置在 document.ready 事件处理程序中(请注意，当使用单页面模板时，这不是一个好主意，您应该使用委托(delegate)页面事件)。
只需像这样包装您的代码:
$(function () {
...
$('#igetdetails').click(function () {
...
});
关于javascript - 多页 jquerymobile 文档第二页上的按钮的单击事件不会触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12805997/