1

这是一个适合您的 jQuery Ajax 向导。使用 jQuery 1.7.2 但也尝试过 1.5.1 ...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

主页加载一个外部（同域）JS 文件。在点击事件的回调中，我通过发布登录表单进行 AJAX 调用以登录。基于从身份验证调用传回的参数（JSON），我将一些内容和导航栏加载到主文档中。

    $("#loginForm_submit").click(function() {
    var action = $("#loginForm").attr('action');
    var form_data = {
        sbgusername: $("#sbgusername").val(),
        sbpassword: $("#sbpassword").val()
    };              

    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        success: function(loginData){
            if(loginData.success == true){ 
                // this will be moved into a loop to laod multiple apps into one page. For testing
                // all arrays only have value
                var webapps = loginData.webapps; //array
                var webappservers = loginData.webappservers; //array 
                var webappscripts = loginData.webappscripts; //array
                var webAppContent = webappservers[0] + '  #' + webapps[0] + 'Content'; 
                // webAppContent = 'api/wpapp.cfm #wpContent';
                var webAppNav = webappservers[0] + '  #' + webapps[0] + 'Nav';
                // webAppNav = 'api/wpapp.cfm #wpNav';
                var scriptURL = webappscripts[0];
                // scriptURL = 'api/wpBase.js';
                var scriptLoad = webapps[0] + 'Load'; 
                // scriptLoad = 'wpLoad';
                $("#sbcore").load(webAppContent); //sbcore is div in main document
                $("#nav").load(webAppNav); //nav is div in main document
                $.ajaxSetup({ cache: false },{async:false});
                $.getScript(scriptURL, function(data, textStatus, jqxhr) {
                   window[scriptLoad](); //because getScript loads methods into global context from what I can tell
                });
                $.ajaxSetup({ cache: false },{async:true});
            }
            else
            {   alert(loginData.message);
                }
        },
        error: function(errorData){
            alert("Server couldn't be reached. Please Try again.");
        }

    });
    return false;               

});

加载的导航栏如下所示：

<div id="menu">
<ul>
    <li id="nw-menu-dashboard" class="first"><a href="#" accesskey="1" title="">Home</a></li>
    <li ><a id="nw-menu-privatearticles" href="#" accesskey="2" title="">Articles</a></li>
</ul>

scriptLoad作为scriptURL加载的JS是这样的（注意它是从同一个域加载的）：

    function nwLoad() {
    //alert("nwBase.js ran");
    nwLoadMenu();
}
function nwLoadMenu() {
      //alert("here");
      $("#nw-menu-dashboard").on("click",function() { 
          //e.preventDefault();
          alert("doDashboard");
      });   
      $("#nw-menu-privatearticles").on("click",function() { 
          //e.preventDefault();
          alert("doPrivateArticles");
      });
}

所以这是很奇怪的事情，如果我取消注释上面的//alert("nwBase.js ran"); 或//alert("here");则菜单绑定到 div 并且菜单单击警报按需要工作。但如上所述，在绑定之前没有警报，它不起作用。我尝试使用 .click、.live、.

我尝试过加载同步、等待等，但无法正常工作。有任何想法吗？

4

2 回答 2

0

它不是有线的，在您取消注释alert功能后，一切都像您需要的那样。
因为在那段时间里，直到你没有按下 OK 按钮，你的菜单已经加载并且你的 CLICK 函数绑定正确。
当响应到来时调用你的nwLoadMenu函数 - 使用回调函数或延迟对象！

于 2012-08-03T10:27:25.920 回答
0

我建议您通过回调（而不是 via setTimeout）重新尝试等待位。

于 2012-08-03T17:50:36.277 回答