Question

这里有一个适合你的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文件。在click事件的回调中，我通过发布登录表单进行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，。

进行绑定

我尝试加载同步，等待等等，但无法使其正常工作。有什么想法吗？

Answer 1

没有连线，在您取消注释alert功能后，一切都像您需要的那样因为在那段时间你没有按下OK按钮，你的菜单已加载，你的CLICK功能绑定正确当响应到来时调用你的nwLoadMenu函数 - 使用回调函数或deffered object！

Answer 2

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

.load和.getScript之后的jQuery绑定仅在alert之后工作

2 个答案: