javascript - 为 jquerys.load() 准备参数

Question

我正在尝试将一个 html 文件加载到另一个 html 文件。

例如:

$(function() {
    $('#main li').on('click', function() {
        var loadstring = $(this).data('url') + ' ' +  $(this).data('target');
        $('#container').load( loadstring );
    });
});

<div id="main">
    <ul>        
        <li data-url="home.html" data-target="#foo">Home</li>
        <li data-url="some.html" data-target="#bar">Some</li>                   
    </ul>
</div>
<div id="container"> </div>

在我的 some.html是 <p>包含数据且 ID 为 bar 的元素. 在我的 home.html 中，没有 ID 为 foo 的 no 元素。 .

我想要实现的是:

我想要的是检查加载的文件是否包含具有特定 id 的元素。 或类，取决于传递的数据。 如果是，加载应该如下所示:

home.html #foo

如果没有，加载应该是这样的

home.html

所以整个页面都被加载了。

有没有一种方法可以使用 load() 并检查现有元素？

我试过这样的

var loadstring = $(this).data('url') + ' ' +  $(this).data('target');
var e = $('#container').load( loadstring );
alert(e.prop('childElementCount'));

但这结果为 0，在第二次尝试时它说它找到了一个元素，因为它实际上是在我的容器中而不是在加载文件中查找:D

对于那些喜欢碰碰运气的人

我只是建了一个小的“testFiddle”^^ HERE

Answer 1

最好的办法是使用异步调用来加载文件:

$(document).on('click', '#main li', function () {
    var url = $(this).data('url');
    var targetSelector = $(this).data('target');
    var callback = function (data) {
        $(targetSelector).html(data);
    };
    var dataType = 'text/html';
    $.get(url, {}, callback);
});