jQuery：不能选择刚刚附加的元素

Question

这是事件发生的情况：

$('div#pages').append($('<div class="page" id="test">...</div>'));

然后，在另一个事件中它失败了：

var page = $('div.page#test'); // returns empty array

我已经调试过了，追加后的html出现在文档结构中，但是没有被选中。在浏览器控制台中执行相同操作非常有效。
可能是什么问题？

Answer 1

使用.find()http://api.jquery.com/find

var page = $('div#pages').find('div.page#test');

Answer 2

你只需要使用live方法：

$('.element').live('click', function(){
   alert($(this).html());
});

Answer 3

这是我的解决方案，适用于附加元素。

Answer 4

有同样的问题，发现如果我在添加div之前添加了监听器，它就找不到div。确保在制作对象后添加监听器。

Answer 5

我最近在动态插入 <select> 元素时不得不使用 hack 来解决这个问题。我改变了这个：

var $item = $('#appendedItem1'); // returns: []

到这里：

var $item = $(document.getElementById('appendedItem1')); // returns: [select#appendedItem1]

我知道它似乎应该是完全相同的东西，但只有第二个有效。

Answer 6

这种情况发生在我身上的次数比我想的要多得多。我几乎尝试了所有方法，虽然某些解决方案适用于某些场景或浏览器，但它们不适用于其他解决方案。我尝试过的一些最常见的解决方案是：

在选择或操作之前等待 DOM / 元素准备好（这很简单，但实际上很多时候都有效）：

$('#element').ready(() => {
    // Get or modify element
});

使用find（参见 CRABOLO 的回答）。这是另一个例子：

// Create element
let div = $('<div></div>');
// Use element to find child
let child = div.find('#element');
// Or
let child = $('#element', div);

如果您尝试侦听由附加元素触发的事件，on 应该在大多数情况下为您工作，因为它可以触发匹配选择器的所有未来元素（请参阅 Md Shahriar 的回答）。这是另一个例子：

$(document).on('event', '.element', function() {
    // "event" has been triggered on a ".element"
});

还有一个例子from the documentation：

$("body").on("click", "p", function() {
    alert($(this).text());
});

如果其他解决方案都不适合您，您可以随时尝试使用Interval 手动检查。这是我在某些情况下能够解决此问题的唯一方法：

/* Usage:
   onEditable('#element', () => {
       // Element is now for sure ready to be selected or modified.
   });
*/
function onEditable(selector, callback){
    if($(selector)[0]){
        callback();
        return;
    }

    let s = setInterval(() => {
        // Check if jQuery can find the element
        if($(selector)[0]){
            // Call callback function
            clearInterval(s);
            callback();
        }
    }, 20);
}

我怎么强调都不为过；如果您能找到适合您的其他解决方案，请改用该解决方案，因为它不能根据事件工作，并且会占用更多的计算机资源。

希望这可以帮助遇到我遇到同样问题的人:)。

Answer 7

在类名page 中缺少引号

也错过了) append()

应该是

    $('div#pages').append($('<div class="page" id="test">...</div>'));

而不是

$('div#pages').append($('<div class=page id="test">...</div>');