Question

我的简单移动应用程序有3个页面，所有页面都使用div / 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>

Answer 1

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

像这样包装你的代码：

$(function () {
    ...

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

    ...
});

Answer 2

旧问题，但现在首选的方法是使用

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

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

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

点击事件为多页jquerymobile文件的第2页上的按钮不会触发

2 个答案: