DOM准备好后的Jquery未定义元素答案

【问题标题】：Jquery undefined element after DOM readyDOM准备好后的Jquery未定义元素
【发布时间】：2014-06-10 17:03:44
【问题描述】：

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

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());
}

查看源代码

<!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>

【问题讨论】：

请用 jQuery 文档就绪回调包裹 $(ajaxStuff('<%= varthing %>'));。
你忘了$(document)ready(...)
@AlirezaAhmadi 做到了，同样的结果
@AlirezaAhmadi, $(ajaxStuff('<%= varthing %>')); 已正确包装在 DOM 中 ....
尝试直接在那里提醒<%= varthing %> 的值。

标签： javascript jquery html undefined document-ready

【解决方案1】：

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

$(ajaxStuff);

或者

$(document).ready(ajaxStuff);

或者

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

或者

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

JS FIDDLE DEMO

【讨论】：

太棒了。这很好用。现在，为什么 jquery/javascript 会这样工作？这似乎相当不直观。这只是 javascript/jquery 的一个奇怪的怪癖还是有目的？
大多数人在 DOM 中“拼出”function(){ ... }，就像上面的第三和第四个例子一样；所以他们不会陷入此类问题。然而，当你没有“拼写”出来时，你必须小心不要使用()，因为那是你调用函数的方式。我认为这可能会有所帮助：stage.learn.jquery.com/javascript-101/functions，*.com/questions/21043779

【解决方案2】：

Live demo

HTML

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

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

【讨论】：

这基本上就是我所做的。我的就绪事件不在单独的文件中。我也试过了，结果没有改变。
@steventnorris 你能把你的代码放在 jsfiddle 里吗？
使用 viewsource 和 js，它似乎在 jsfiddle 中工作，但我仍然得到一个未定义的，好像它没有在 DOM 上运行，但是之前。 jsfiddle.net/j6uz4

【解决方案3】：

你忘记了 jQuery 就绪事件：

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

【讨论】：

我当前的语法遵循您的第二个示例。我也试过第一个。我没有把它卸载到一个单独的文件中，试过了，结果一样。
这很奇怪...您的 ViewResource 完全正确。如果您在小提琴上尝试它，它可以工作：S。您是否在 C# 中使用 ASP .NET？ C# 部分是否有任何“OnLoaded”？也许您必须触发该事件..但这仍然很奇怪，因为结果html是正确的：S
我没有在 C# 中使用 OnLoaded，但我正在使用带有 C# 代码隐藏的 ASP.NET。我在服务器端所做的只是一些处理来构建选择列表。
我认为它与 C# 代码隐藏有关，但我不知道问题出在哪里，也许这个 *.com/questions/17632425/… 解决了你的问题。您应该添加 C# 和 ASP .NET 标记，以便在此处获得 .NET 专家！ :D