23

据我所知，只有已加载到 DOM 中的对象才能使用选择器进行操作。这在下面的示例中进行了说明，当单击按钮时，它的单击处理程序未成功尝试选择要加载的页面中的元素并将其更改为之前的 html。我推测，因为在链接页面加载到 DOM 之前触发了点击处理程序，所以选择器不会影响元素。

我的问题是，有没有办法实例化一个外部的 html 块并在将其插入 DOM 之前对其进行操作。

脚本_1.js：

$(document).ready(function () {
    $("#testButton").click(function () {
        $("#externalPageDiv").html("hello world");
    });
});

外部页面html：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="externalPage" data-add-back-btn="true">
        <div data-role="content" id="externalPageContent">
            <div id="externalPageDiv"></div>external page</div>
    </div>
</body>

主页 Html:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="internalPage_1" data-add-back-btn="true">
        <div data-role="content" id="internalPageContent_1">
            <a href="externalPage.html" id="testButton" data-role="button" rel="external">Page Change</a>
        </div>
    </div>
    <div data-role="page" id="mainPage" data-add-back-btn="true">
        <div data-role="content" id="mainPageContent">Main Page</div>
    </div>
</body>

4

2 回答 2

16

我正在纠正我的错误评论。是的，你可以这样做，但是阅读 jQuery 文档，据说代码是插入到 DOM http://api.jquery.com/jQuery/#jQuery2中的。因此，即使下面的代码似乎也没有在 DOM 中插入任何内容，它确实被插入了。

尝试这个：

var codeToProcess = "<div>" +
                    "    <div id='myDiv1'>a</div>" +
                    "    <div id='myDiv2'>b</div>" +
                    "    <div id='myDiv3'>c</div>" +
                    "</div>";

var $toProcess = $( codeToProcess );
$toProcess.find( "div" ).addClass( "processed" );

// getting by id before insertion
alert( $toProcess.find( "#myDiv1" ).html() );
alert( $( "#myDiv1" ).html() ); // this will return null, since the divs
                                // were not yet added to the document

$toProcess.appendTo( "#container" );
// or $( "#container" ).html( $toProcess );

// getting by id after insertion
alert( $( "#myDiv2" ).html() );

jsFiddle：http: //jsfiddle.net/davidbuzatto/me7T3/

编辑：

要从外部文件插入代码，可以使用 load 函数。您可以在此处查看示例：http: //jsfiddle.net/davidbuzatto/zuFsc/请注意，在此示例中，我使用了 echo 服务 os jsFiddle 来模拟外部文件。看看这里如何在 Java 中将视图文件输出为 ajax 响应？在这里http://api.jquery.com/load/

于 2012-08-05T03:49:13.777 回答
10

您可以使用 javascript 手动创建未插入 DOM 层次结构的 DOM 元素，并且可以在将它们插入 DOM 之前尽可能多地操作它们。

但是，如果您试图在页面 HTML 被解析之前操作由页面 HTML 创建的 DOM 元素，则不能这样做。DOM 元素此时不存在，因此除非您按照第一段中的描述手动创建它们，否则没有什么可操作的。

某些操作仅适用于插入到 DOM 层次结构中的 DOM 元素，例如document.getElementById()，但其他方法可以用于不在主层次结构中的 DOM 片段，例如不在 DOM 层次结构中的 DOM 元素在item.getElementsByClassName()哪里。item

在 jQuery 中，默认的上下文是文档，所以一个简单的选择器操作就像$(".foo")只搜索 DOM 文档层次结构中的 DOM 元素。但是，如果你传递一个特定的上下文，$(".foo", item)那么 jQuery 选择器将搜索那个上下文，而不是主文档。

于 2012-08-05T03:51:02.447 回答