Question

我试图在DOM准备好之后运行一个方法，但是无法访问该元素。它回归未定义。代码如下。我知道元素是可访问的，因为代码在DOM元素处理完成后运行。单独的js文件中的警报返回undefined。 html底部的警报返回正确的值。

HTML

<%@ Master Language="C#" inherits="test.master"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
    <head runat="server">
        <title>test</title>
        <link rel="Stylesheet" href="css/master.css" />
        <script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="./javascript/master.js"></script>
        <script type="text/javascript">
            $(ajaxStuff('<%= varthing %>'));
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="hdr">
                <div id="hdr_logo">
                    <img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
                </div>
                <div id="hdr_toolslct">
                    <div id="hdr_toolslct_wrpr">
                        <span id="hdr_toolslct_cursys"><span id="hdr_toolslct_cursys_payer" runat="server"></span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
                        Hello <span id="hdr_toolslct_name" class="hdr_toolslct_name" runat="server"></span>!&nbsp;&nbsp;
                        Thing1:&nbsp;
                        <select id="hdr_toolslct_gp" runat="server">
                        </select>
                        &nbsp;&nbsp;
                        Thing2:&nbsp;
                        <span id="hdr_toolslct_prov_wrpr"></span>
                    </div>
                </div>
            </div>
            <div id="nav" class="nav" runat="server">
                <div id="nav_home" class="nav_tab">Home</div>
                <div id="nav_worklist" class="nav_tab">Worklist</div>
                <div id="nav_reporting" class="nav_tab">Reporting</div>
                <div id="nav_splits" class="nav_tab">Splits</div>
                <div id="nav_users" class="nav_tab">Users</div>
                <div id="nav_import" class="nav_tab">Import</div>
            </div>
            <div id="cntnt">
                <asp:ContentPlaceHolder id="cntnt_phldr" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div id="ftr">
                If you experience issues with this tool, please stop using it. I'm not going to help.
            </div>
        </div>
        <script type="text/javascript">
            alert($("#ftr").html());
        </script>
    </body>
</html>

的Javascript

function ajaxStuff(vartest) {
    alert($("#ftr").html());
}

ViewSource

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
    <head><title>
    test
</title><link rel="Stylesheet" href="css/master.css" />
        <script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="./javascript/master.js"></script>
        <script type="text/javascript">
            $(ajaxStuff('no'));
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="hdr">
                <div id="hdr_logo">
                    <img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
                </div>
                <div id="hdr_toolslct">
                    <div id="hdr_toolslct_wrpr">
                        <span id="hdr_toolslct_cursys"><span id="ctl00_hdr_toolslct_cursys_payer">Mcaid</span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
                        Hello <span id="ctl00_hdr_toolslct_name" class="hdr_toolslct_name">Name Name</span>!&nbsp;&nbsp;
                        Thing1:&nbsp;
                        <select name="ctl00$hdr_toolslct_gp" id="ctl00_hdr_toolslct_gp">
    <option selected="selected" value="OP1">Option 1</option>
    <option value="OP2">Option 2</option>
</select>
                        &nbsp;&nbsp;
                        Thing2:&nbsp;
                        <span id="hdr_toolslct_prov_wrpr"></span>
                    </div>
                </div>
            </div>
            <div id="ctl00_nav" class="nav">
                <div id="nav_home" class="nav_tab">Home</div>
                <div id="nav_worklist" class="nav_tab">Worklist</div>
                <div id="nav_reporting" class="nav_tab">Reporting</div>
                <div id="nav_splits" class="nav_tab">Splits</div>
                <div id="nav_users" class="nav_tab">Users</div>
                <div id="nav_import" class="nav_tab">Import</div>
            </div>
            <div id="cntnt">




            </div>
            <div id="ftr">
                If you experience issues with this tool, please stop using it. I'm not going to help
            </div>
        </div>
        <script type="text/javascript">
            alert($("#ftr").html());
        </script>
    </body>
</html>

Answer 1

请记住，您未定义的原因是因为正在立即调用函数ajaxStuff。如果您使用以下任何一种形式，它应该按预期工作。 ()或(arguments)立即调用该函数：

$(ajaxStuff);

或

$(document).ready(ajaxStuff);

或者

$(function() {
    ajaxStuff('no');
});

或

$(document).ready(function() {
    ajaxStuff('no');
});

JS FIDDLE DEMO

Answer 2

<强> Live demo

<强> HTML

<div id="test">hello</div>

<强> JS

$('document').ready(function(){
    alert($('#test').html());
});

Answer 3

你忘记了jQuery ready事件：

http://api.jquery.com/ready/

您的代码可能适用于：

$( document ).ready(function() {
 // Handler for .ready() called.
 alert($("#ftr").html());
});

或者

$(function() {
   // Handler for .ready() called.
   alert($("#ftr").html());
});

在JavaScript部分。

Demo

更新：

由于这不起作用，您应该尝试分析生成的DOM：

$(function() {
   // Handler for .ready() called.
   console.log($("body").html());
});

也许有ID被更改了？或类似的东西？你告诉我们：D

DOM准备好后，Jquery未定义元素

3 个答案: