javascript - .load 和 .getScript 之后的 jQuery 绑定(bind)仅在警报之后有效

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文件。在点击事件的回调中，我通过发布登录表单进行 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"); 在上面，菜单将绑定(bind)到 div，并且菜单单击警报将按需要工作。但如上所述，如果在绑定(bind)之前没有警报，它就不起作用。我尝试过使用 .click、.live、.

进行绑定(bind)

我尝试过加载同步、等待等，但无法让它工作。有什么想法吗？

Answer 1

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