Javascript jQuery:Can'；不要只选择附加的元素

这就是事件发生的情况：

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

我已经调试过了，追加的html在追加后出现在文档结构中，但无法选中。在浏览器控制台中执行同样的操作非常有效。

---

有什么问题吗？

在类名

页面上遗漏了引号

对于
append（）

应该是

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

$（'div#pages'）。追加（$（'…'）；

而不是

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

$（'div#pages'）。追加（$（'…'）；
使用
.find（）

有同样的问题，发现如果我在添加div之前添加了侦听器，它将找不到div。请确保在创建对象之后添加侦听器。
最近，当我动态插入
元素时，我不得不使用黑客来解决此问题。我更改了以下内容：

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

为此：

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

我知道看起来应该是完全一样的，但只有第二种方法有效。
您只需要使用live方法：

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

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

在选择或操作DOM/element之前等待它准备就绪（这非常简单，但实际上需要很多时间）：

使用
find
（参见CRABOLO的答案）。下面是另一个示例：

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

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

举个例子：

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

/* 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);
}

这一点我再强调也不为过；如果你能找到另一个适合你的解决方案，那么就改用它，因为这不适合基于事件的解决方案，而且会占用更多的计算机资源。

希望这能帮助那些遇到与我相同问题的人：）。
您的第一个代码段缺少括号。那是打字错误吗？另外，您如何验证事件的顺序？
$（“#test”）
应该足够了，因为id应该是唯一的。没有理由在选择器中链接一个类和一个id。@StephenThomas这是写文章时的打字错误（已编辑）。嗯，这不一定是在事件上，在添加div之后，我在浏览器中转到dev tools，确保div在那里，转到控制台，尝试用jquery选择它-不成功。@watson谢谢提醒，但是如果您有多个元素具有相同的
id
，也可以有其他div，如
…
@Acute，这是无效的HTML。虽然这是应该修复的，但不太可能是问题的原因。问题是，元素在append之后的显示与预期一致。不，这不是问题，这是我的打字错误（已修复）。引号在现代浏览器上是不必要的。没有回答问题它起作用了，你能解释为什么通常的select不起作用吗？@Acute我认为这与范围问题有关。例如，如果您在附加时的相同函数/事件中使用不带.find（）的常规选择器，那么它将工作。但是，由于您在两个不同的函数/事件中执行这些操作，或者在函数内部执行一个，在函数外部执行另一个，因此需要使用.find（），因为DOM第一次找不到它。对不起，这不是最好的explaining@LowerClassOverflowian事实上，你做得很好！如何添加侦听器？这是唯一适合我的侦听器，live不可用的原因是它已被弃用。我不知道这是不是很棒。应该是答案。不赞成。。。。。
// Create element
let div = $('<div></div>');
// Use element to find child
let child = div.find('#element');
// Or
let child = $('#element', div);

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

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

/* 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);
}