1

我的简单移动应用程序有 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>
4

2 回答 2

1

您在 DOM 元素存在之前运行 JS 代码。由于您使用的是多页模板，因此您只需将问题中的代码放在document.ready事件处理程序中（请注意，在使用单页模板时，这不是一个好主意，您应该使用委托的页面事件）。

只需像这样包装您的代码：

$(function () {
    ...

    $('#igetdetails').click(function () {

    ...
});
于 2012-10-09T19:33:23.913 回答
0

老问题，但现在最好的方法是

http://api.jquery.com/on/

$(document).on('click', '#igetdetails', function(event) {
    alert('hello')
});​

这将为文档绑定事件并侦听将来要绑定的匹配选择器。

于 2013-04-11T23:15:02.903 回答