Jquery 如何选择使用ajax动态加载的元素？

由于页面的某些部分对于所有页面都是相同的，所以我希望能够动态加载它们，以便只需编辑一次。例如，我需要加载一个侧栏和一个导航栏

加载后，我需要将这些外部页面中的一些元素存储在变量中，以便稍后调用它们，例如，设置它们的动画，操纵它们等等

我以为我只需要选择类或id，但这似乎不够

<!-- navbar.html -->
<div id="navbar-content">
    <div id="element1"></div>
    <div id="element2"></div>
    <div id="element3"></div>
</div>

<!-- index.html -->
$( '#navbar' ).load( 'navbar.html #navbar-content > *' );
$( '#sidebar' ).load( 'sidebar.html #sidebar-content > *' );

var element1 = $( '#element1' ),
    element2 = $( '#element2' ),
    element3 = $( '#element3' );

console.log( 'element1' );

这意味着控制台没有返回任何内容

如果可能的话，如何选择动态加载的元素？

尝试以下方法：

   $('#navbar').load('navbar.html #navbar-content > *', function(){
         var element1 = $( '#element1' ),
         element2 = $( '#element2' ),
         element3 = $( '#element3' );

         console.log(element1.text());
   });

   $('#sidebar').load('sidebar.html #sidebar-content > *', function (){
         //or here
   });

这样，您将在加载完成后访问元素。

尝试以下操作：

   $('#navbar').load('navbar.html #navbar-content > *', function(){
         var element1 = $( '#element1' ),
         element2 = $( '#element2' ),
         element3 = $( '#element3' );

         console.log(element1.text());
   });

   $('#sidebar').load('sidebar.html #sidebar-content > *', function (){
         //or here
   });

---

这样，您将在加载完成后访问元素。

如果您正在初始化插件，则需要使用

load（）

的

complete

回调

$( '#navbar' ).load( 'navbar.html #navbar-content > *' , function(){
     // new html now exists in #navbar, run code here that manipulates the html
     // alse "this" is #navbar
    $(this).find('.someSelector').doSomething();
});

另一种设置方法是创建一个函数，并将该函数作为引用传递给load（）

如果您所做的只是添加事件处理程序，那么可以在代码中的任何位置使用事件委派来完成

---

参考：

如果要初始化插件，需要使用

load（）

的

完成
回调

$( '#navbar' ).load( 'navbar.html #navbar-content > *' , function(){
     // new html now exists in #navbar, run code here that manipulates the html
     // alse "this" is #navbar
    $(this).find('.someSelector').doSomething();
});

另一种设置方法是创建一个函数，并将该函数作为引用传递给load（）

如果您所做的只是添加事件处理程序，那么可以在代码中的任何位置使用事件委派来完成

参考：
您直接在
.load（）
语句之后分配变量，因此可能还没有实际加载元素。在分配变量之前，您必须等到确定内容已加载

.load（）
方法接受一个回调函数，该函数在完成后将启动。这将是一个很好的起点：

$( '#navbar' ).load( 'navbar.html #navbar-content > *' , function() {
    var element1 = $( '#element1' ),
        element2 = $( '#element2' ),
        element3 = $( '#element3' );

    console.log( element1 );
});

这也会起作用，并且更易于重用：

$( '#navbar' ).load( 'navbar.html #navbar-content > *' , myCallback);

function myCallback() {
    var element1 = ... etc
}

您直接在
.load（）
语句之后分配变量，因此可能尚未实际加载元素。在分配变量之前，您必须等到确定内容已加载

.load（）
方法接受一个回调函数，该函数在完成后将启动。这将是一个很好的起点：

$( '#navbar' ).load( 'navbar.html #navbar-content > *' , function() {
    var element1 = $( '#element1' ),
        element2 = $( '#element2' ),
        element3 = $( '#element3' );

    console.log( element1 );
});

这也会起作用，并且更易于重用：

$( '#navbar' ).load( 'navbar.html #navbar-content > *' , myCallback);

function myCallback() {
    var element1 = ... etc
}

尝试在回调函数中为
load（）
选择元素。这将确保您尝试选择的元素存在于DOM中

$( '#navbar' ).load( 'navbar.html #navbar-content > *', function(){
    var element1 = $( '#element1' ),
    element2 = $( '#element2' ),
    element3 = $( '#element3' );
});

尝试在回调函数中为
load（）
选择元素。这将确保您尝试选择的元素存在于DOM中

$( '#navbar' ).load( 'navbar.html #navbar-content > *', function(){
    var element1 = $( '#element1' ),
    element2 = $( '#element2' ),
    element3 = $( '#element3' );
});

这只在函数中可能吗？函数中是唯一一个您100%确定内容实际上已经加载的地方。@erkaner我不希望，因为通过这种方式，我必须在函数内工作，而其他需要调用这些元素但必须在函数外调用的插件也可能无法工作。@dcdeiv如果没有一些context@charlietfl好，导航栏中有一个按钮，用于打开动态加载的侧栏。所以我对侧边栏重复同样的过程，我有一个插件需要选择那个按钮，不幸的是它没有看到，因为它不在它的函数中。这只在函数中可能吗？在函数中是唯一一个你100%确定内容实际上已经加载的地方。@erkaner我不希望，因为通过这种方式，我必须在函数内工作，而其他需要调用这些元素但必须在函数外调用的插件也可能无法工作。@dcdeiv如果没有一些context@charlietfl好，导航栏中有一个按钮，用于打开动态加载的侧栏。所以我对侧边栏重复同样的过程，我有一个插件需要选择那个按钮，不幸的是它没有看到，因为它不在它的功能中。
console.log（'element1'）
将简单地输出那个字符串是的，刚刚编辑过。我直接从问题中复制了它，没有思考：P
console.log（'element1'）
将简单地输出该字符串是的，只是编辑了它。我直接从问题中复制了它，没有思考：PIs是否可以将同一个回调绑定到两个加载函数<代码>$el1.load（'el1.html'，回调）$el2.load（'el2.html'，callback）
可以使用
$.when（$el1.load（…），$el2.load（…）.done（function（）{/*两者现在都完成了*/}）
但是，如果满足您的需要，可以使用相同的加载回调处理程序。当（$（“#主导航栏”）.load（'navbar.html#导航栏内容>*'），$（'navbar.html#侧栏'）。load.load（'sidebar.html#sidebar content>*'））.done（loadCallback）；

它仍然返回未定义的变量定义$.when内的变量。由于ajaxIs的异步性质，您无法继续使用问题中显示的方法。这可能会将同一回调绑定到两个加载函数？

$el1.load（'el1.html'，callback）；$el2.load（'el2.html'，callback）

可以使用

$.when（$el1.load（…），$el2.load（…）.done（function（）{/*两者现在都完成了*/}）

但是，如果满足您的需要，可以使用相同的加载回调处理程序。当（$（“#主导航栏”）.load（'navbar.html#导航栏内容>*'），$（'navbar.html#侧栏'）.load.load不起作用（'sidebar.html#sidebar content>*'））.done（loadCallback）；它仍然返回未定义的变量定义$.when内的变量。由于ajax的异步特性，您无法继续使用问题中显示的方法