javascript - Javascript 脚本因警报而失败

Question

我有以下代码：

$(".zalen").change(function(){
        var number = $(this).val(); 
        $('.Zaal').load('zaal'+ number +'.html');

        var storageName = "zaal" + $(".zalen").val() + '_chairs';
        var chairs = localStorage.getItem(storageName);
        if(chairs == null)
        {
            chairs = "";
        }
        var chairArray = chairs.split(" "); 
        alert(chairArray);
        $("td.chair").each(function(index){
            for(var i=0; i < chairArray.length; i++)
            {
                if(index == chairArray[i])
                {
                    $(this).addClass('reserved');   
                }
            }
        })
    });

注意椅子分开后的警报。

它与警报完美配合。但是当我完成测试并删除警报时。代码停止工作，我不知道为什么会这样。

任何人都可以帮我解决这个问题。

解决方案 ：

$(".zalen").change(function(){
        var number = $(this).val(); 
        $('.Zaal').load('zaal'+ number +'.html', function() {
            var storageName = "zaal" + $(".zalen").val() + '_chairs';
            var chairs = localStorage.getItem(storageName);
            if(chairs == null)
            {
                chairs = "";
            }
            var chairArray = chairs.split(" ");  
            $("td.chair").each(function(index){
                for(var i=0; i < chairArray.length; i++)
                {
                    if(index == chairArray[i])
                    {
                        $(this).addClass('reserved');   
                    }
                }
            })
        });
    });

谢谢@jbabey 的解决方案。我非常感激

Answer 1

jquery 的load()函数对内容执行异步请求。您需要等到该内容准备好后再对其进行操作。当您收到警报时，代码会暂停足够长的时间load以完成。您拥有的任何依赖于正在加载的内容的代码都.Zaal应该在加载的成功处理程序中：

$(".zalen").change(function(){
    var number = $(this).val(); 
    $('.Zaal').load('zaal'+ number +'.html', function () {
        // put all of this in the complete callback
        var storageName = "zaal" + $(".zalen").val() + '_chairs';
        var chairs = localStorage.getItem(storageName);
        if(chairs == null) {
            chairs = "";
        }
        var chairArray = chairs.split(" "); 
        alert(chairArray);
        $("td.chair").each(function(index){
            for(var i=0; i < chairArray.length; i++) {
                if(index == chairArray[i]) {
                    $(this).addClass('reserved');   
                }
            }
        })
    });
});