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

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

Answer 3

您只需要使用实时方法：

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

Answer 4

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

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>');