javascript - 选择或 Jquery 有时无法加载

问题描述

动态改变 DOM 工作正常，直到我添加 Chosen 并在页面加载时开始执行它们。现在，当我通过反复刷新来测试我的页面时，有时它会正确加载，有时则不能。大多数相关的帖子答案都要求检查文档是否已加载或 jquery 是否准备就绪，并且我已经尝试了所有排列（目前都是）。我正在引用外部 .js 文件和 .css 。函数调用的内容是否如此密集，以至于我应该用 ready() 检查来包围更多操作？在对 DOM 执行操作之前引入延迟可能会有所帮助吗？

我认为相关的所有内容的摘录：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="semanticWeb.rep.concept.CommonNoun" %>
<%@ page import="java.util.ArrayList" %>

<!DOCTYPE html>
<html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
            <link rel="stylesheet" type="text/css" href="http://harvesthq.github.io/chosen/chosen.css">
            <script type="text/javascript" src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script> 

            <Script>
                var theForm; 

                <%ArrayList<CommonNoun> commonNouns =(ArrayList<CommonNoun>)request.getAttribute("AllCommonNouns"); %>
                <%System.out.println("commonNouns: " + commonNouns);%>

                function addInheritanceElement() {

                    <%  for(int i = 0; i<commonNouns.size(); i++) {%>
                        $('<Option>')
                        .attr('value', "<%=commonNouns.get(i).getID()%>")
                        .text('<%=commonNouns.get(i).getName()%>')
                        .appendTo($("#superType"));                 
                    <%  } %>    

                    $(".chosen-select").chosen();
                }


            function testSelectLoading() {
                var newOptions = {
                        'red' : 'Red',
                        'blue' : 'Blue',
                        'green' : 'Green',
                        'yellow' : 'Yellow'
                    };
                    var selectedOption = 'green';

                    var select = $('<select>').appendTo(theForm);
                    var options;
                    if(select.prop) {
                      options = select.prop('options');

                    }
                    else {
                      options = select.attr('options');
                    }
                    $('option', select).remove();

                    $.each(newOptions, function(val, text) {
                        options[options.length] = new Option(text, val);
                    });
            }
</Script>
    </head>
    <body>
        <article>
            <Form id="myForm">
                <label for="superType">Inherit from Superclass: </label>

                <Select multiple data-placeholder="Must select one or more Common Nouns..." tabindex='5' class="chosen-select" id="superType" style="width: 300px;" >
                </Select>
            </Form>
        </article>      
        <script>
//          $(document).ready(addInheritanceElement());
            $(window).on("load", function() {
                theForm = document.getElementById("myForm");
                $( document ).ready(addInheritanceElement());
                $( document ).ready(testSelectLoading());
            });
        </script>
    </body>
</html>

标签： javascriptjquerycssjquery-chosen

javascript - 选择或 Jquery 有时无法加载

问题描述

解决方案

推荐阅读