Question

所有我都是jQuery的新手，我在使用jQuery方法操纵AJAX结果时遇到了一些问题。

我使用AJAX get并在结果输出上执行find方法。但这似乎只有一次。在find()参数中使用相同选择器的后续尝试不起作用。不同的选择器可以工作，但只能一次。

在遍历AJAX结果时似乎有什么事情发生了？

AJAX电话......

    $.get('sections.htm', {}, function(data) {
        var $response = $('<div />').html(data);
        showContent("teaser");

        function showContent(nav) {
            loadContent(nav);
            loadSlimboxHack();
            $('#content').fadeIn(400);
        }

查找元素......

    function loadContent(nav) {
        if (nav == 'teaser')
        {
            $('#content').html($response.find('.teaser'));
        }

这样做有效，但如果我再次尝试showContent(".teaser")，它就会失败，因为它似乎找不到任何内容，因此#content会被覆盖。

看一下我的网站，看看......

http://www.shadowshapes.com/dev

Answer 1

@redsquare，非常感谢！这让我走上了正确的道路。

对于没有经验的人，append()在单个选择器上下文中表现为“移动”而不是“复制”。显然这是新手之间的一个常见错误。它没有完全记录？我现在感觉不是很糟糕！：）

http://www.nabble.com/Undocumented-move-copy-behavior-of-append%28%29-et-al.-ts21179461s27240.html#a24146606

在这种情况下，除了clone()之外，我还需要使用append()。

$('#content').append($response.find('div.concept' + tag).clone());

大！问题解决了！

Answer 2

您使用$ response的内容并将其中一些内容添加到其他元素中。这意味着他们退出$ response并进入他们的新家，因此选择器只能工作一次。

以这种方式看待它。如果你从钱包中取出一个且只有10美元并将它放入我的钱包中，那么下次当你查看钱包时它就不会存在。为什么？因为它在我的。

Answer 3

从第一眼看，我认为你有closure个问题......

$response变量未在事件处理程序的闭包范围内捕获（例如在您的点击 - ＆gt; fadeout - ＆gt; showContent）。我猜测如果您传递$response变量而不是尝试全局引用它，它将被修复。即以你的榜样为例，做到这样：

$.get('sections.htm', {}, function(data) {
    var $response = $('<div />').html(data);
    showContent("teaser", $response);

    function showContent(nav, $response) {
        loadContent(nav, $response);
        loadSlimboxHack();
        $('#content').fadeIn(400);
    }
...
    function loadContent(nav, $response) {
    if (nav == 'teaser')
    {
        $('#content').html($response.find('.teaser'));
    }
...

这样一来，当你去使用它时，你可以保证$response永远都在那里。另一种选择是通过在$response之外宣布$(document).ready来使{{1}}真正具有全球性。

Answer 4

谢谢，我实际上已经尝试过$response而没有运气。我再次尝试了，并尝试了另一个使$response全局化的建议。没有运气。

奇怪的是，$response中loadContent()可用。看起来一旦选择器被发现它就不再可以被“使用”了？例如，一旦页面加载，就会发生以下情况......

        if (nav == 'teaser')
        {
            $('#content').html($response.find('.teaser'));
        }

但是点击其中一个预告图像会启动一个事件......

    $('div.teaser_img').live("click", function() {
        var nav = $(this).attr("id");
        $('#content').fadeOut(400, function() {
            showContent(nav, $response);
        });

然后开始loadContent()内的条件......

                if (nav == projects[i])
                {
                    var tag = '#' + nav;
                    $('#content').html($response.find('div.teaser' + tag));
                    $('#content').append($response.find('div.concept' + tag));
                    break;
                }

因此，在加载页面时已找到div.teaser，#content仅使用div.concept编写。任何其他选择器也可以工作，只要它们尚未使用。

jQuery find（）只对AJAX结果工作一次？

4 个答案: