Jquery中的多个Javascript函数_Javascript_Jquery_Ajax_Jquery Mobile

Jquery中的多个Javascript函数

javascript jquery ajax jquery-mobile

Jquery中的多个Javascript函数,javascript,jquery,ajax,jquery-mobile,Javascript,Jquery,Ajax,Jquery Mobile,我已经有同样的问题很久了，我想知道是否有人能告诉我我做错了什么我创建了一个多页Jquery（如下面的示例中的一个），但是，当我添加对我保存的.js文件的引用时，它总是倾向于要么不加载页面内容，要么在其他地方根本不起作用我的HTML代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Find A Deal</title> <meta

我已经有同样的问题很久了，我想知道是否有人能告诉我我做错了什么

我创建了一个多页Jquery（如下面的示例中的一个），但是，当我添加对我保存的.js文件的引用时，它总是倾向于要么不加载页面内容，要么在其他地方根本不起作用

我的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Find A Deal</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        img.fullscreen {
            max-height: 100%;
            max-width: 100%;
        }
        </style>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/tmp/json4.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><h6>"+dat.dname+"</h6><h5>"+dat.description+"</h5></a></li>");
                $(document).on('click', '#'+dat.dealid, function(event){  
                    if(event.handled !== true) // This will prevent event triggering more then once
                    {
                        dealObject.dealID = $(this).attr('id'); 
                        dealObject.restaurantid = $(this).attr('data-restaurantid');
                        dealObject.shortName = $(this).find('h1').html(); 
                        dealObject.image = $(this).attr('data-image');
                        //dealObject.dname = $(this).find('input').html();
                        //dealObject.dname = $(this).find('desc').val();
                        dealObject.dealName = $(this).find('h6').html();
                        dealObject.description = $(this).find('h5').html(); 
                        //dataObject.dname=$(this).find('p').html()
                        //dealObject.name = $(this).find('desc').eq(0).val(dealObject.name);

                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });

    $(document).on('pagebeforeshow', '#index2', function(){       
        //$('#index2 [data-role="content"]').html('You have selected Link' + dealObject.dname);
        $('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject);
        $('#index2 [data-role="content"]').find('#title').html(dealObject.name);
        //$('#index2 [data-role="content"]').find('#description').html(dealObject.dname);
                $('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
                $('#index2 [data-role="content"]').find('input#tname').val(dealObject.dealName);
                $('#index2 [data-role="content"]').find('input#dealid').val(dealObject.dealID);


    });

    var dealObject = {
        dealID : null,
        restaurantid : null,
        shortName : null,
        image : null,
        dealName : null,
        description: null
    }    
</script>

</head>     
<body>    
<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>Current Deals</h1>
    </div>

    <div data-role="content">
        <div class="content-primary">
            <ul id="list" data-role="listview" data-filter="true"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="http://localhost/findadeal/index.html" data-icon="home">Home</a></li>
                <li><a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a></li>
            </ul>
        </div>
    </div>
</div>

<!--New Page --> 
<div data-role="page" id="index2">
<!--<script src="js/ammend.js"></script>--!>
<div data-role="header">
        <h1> Find A Deal </h1> 
    </div>

    <div data-role="content">

 <!--       <?php
    if( !isset( $_SESSION ) ){
     session_start();
        }

    if( isset( $_SESSION['username'] ) ){
        echo ".";
        } ?>   --!>

        <form id="test">
        <label for="name">Deal Name:</label>
        <input type="text" value="" name="tname" id="tname"/>
        <label for="desc">Description</label>
        <input type="text" value="" name="desc" id="desc"/>  
        <a data-role="button" id="amend" data-icon="star" data-iconpos="left">Amend Deal </a>
        <input type="text" value="" name="dealid" id="dealid"/>

        <h3></h3>
        <!--<img src="" width="100px" height="100px" id="deal-img">
        <h1 id="title"></h1>
        <h3 id="description"></h3>
        <p id="name"></p>--!> 
    </div>

    <footer data-role="footer" data-position="fixed">
        <nav data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="#index" data-icon="grid">My Deals</a></li>
            </ul>
        </nav>
    </footer>   
</div>
</body>
</html>

当按下按钮时，应该调用上面的代码，但大多数时候，我甚至无法在向代码添加引用后看到按钮

如果有人曾经遇到过与此相同的问题，或者能够阐明这个问题，我将非常感激

您的问题与jQuery移动页面处理有关

因为您正在使用多个HTML页面将ajax加载到DOM中，所以必须从第一个HTML文件引用所有js脚本。所有其他HTML文件将仅部分加载，仅加载正文部分，而HEAD将被丢弃。

您的问题与jQuery移动页面处理有关

因为您正在使用多个HTML页面将ajax加载到DOM中，所以必须从第一个HTML文件引用所有js脚本。所有其他HTML文件将仅部分加载，仅加载身体部分，而头部将被丢弃

$(document).on('pagebeforeshow', '#index2', function(){ 
$('#amend').on('click', function(){
    if($('#tname').val().length > 0 && $('#desc').val().length > 0 && $('#dealid').val().length > 0){
        userObject.tname = $('#tname').val(); // Put username into the object
        userObject.desc = $('#desc').val(); // Put password into the object
        userObject.dealid = $('#dealid').val();
        // Convert an userObject to a JSON string representation
        var outputJSON = JSON.stringify(userObject);
        // Send data to server through ajax call
        // action is functionality we want to call and outputJSON is our data
        ajax.sendRequest({action : 'index2', outputJSON : outputJSON});
    } else {
        alert('Please fill all nececery fields');
    }
 });    
});

$(document).on('pagebeforeshow', '#index2', function(){ 
if(userObject.name.length == 0){ // If username is not set (lets say after force page refresh) get us back to the login page
    $.mobile.changePage( "#index2", { transition: "slide"} ); // In case result is true change page to Index  
}
$(this).find('[data-role="content"] h3').append('Deal Amended:' + userObject.name); // Change header with added message
//$("#index").trigger('pagecreate');
});

// This will be an ajax function set
var ajax = {
sendRequest:function(save_data){
    $.ajax({url: 'http://localhost/test/login/amend.php',
        data: save_data,
        async: true,
        beforeSend: function() {
            // This callback function will trigger before data is sent
            $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
        },
        complete: function() {
            // This callback function will trigger on data sent/received complete
            $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
        },
        success: function (num) {
            if(num == "true") {
                $.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
            } else {
                alert('Deal has been added successfully'); // In case result is false throw an error
                $.mobile.changePage( "#index", { transition: "slide"} );
            }
            // This callback function will trigger on successful action
        },
        error: function (request,error) {
            // This callback function will trigger on unsuccessful action                
            alert('Error: " . mysql_error() . "Query: " . $query;');
        }
    });
}
}

// We will use this object to store username and password before we serialize it and send to server. This part can be done in numerous ways but I like this approach because it is simple
var userObject = {
tname : "",
desc : "",
dealid: ""
}