jQuery 无法访问附加元素答案

【问题标题】：jQuery can't access append elementjQuery 无法访问附加元素
【发布时间】：2012-12-21 21:16:51
【问题描述】：

我在一个函数中有这个：

$('#users').append($("<div id='usuarios'>").text(mensaje[1][i]));

我想为这个新的<div> 创建一个 onclick 事件。我怎样才能做到这一点？我在函数外这样尝试：

$(document).ready(function(){
$('#usuarios').click(function() {
        alert("click");
    });
});

但它不起作用。

【问题讨论】：

【解决方案1】：

对于 jQuery 1.7+，您可以使用 .on() 将事件处理程序附加到父元素

$(document).ready(function(){
  $('body').on('click', '#usuarios', function() {
     alert("click");
  });
});

甚至更好：

$(document).ready(function(){
  $('#users').on('click', '#usuarios', function() {
     alert("click");
  });
});

【讨论】：

$('body').live('click', '#usuarios', function() {}) 也可以使用，但从 jQuery 1.7 开始，不推荐使用 .live() 方法.
$('#users').on('click', '#usuarios', function() { 更好。您希望最近的父级上的事件处理程序不是动态的（当有很多事件处理程序时性能更好）。这就是 .live() 被弃用的原因，因为它将所有处理程序放在 document 上。
@jfriend00 还有其他一些麻烦事，例如magic、浪费的选择器查找等。

【解决方案2】：

你可以内联（通过在.text 之后链接.append），因为这正是 jQuery 的 API 的工作方式，但你也可以将它放在一个看起来更好的变量中：

var usarios = $("<div id='usuarios'>").text(mensaje[1][i]);

usarios.click(function() {
    alert('click');
});

$('#users').append(usarios);

【讨论】：

@ATOzTOA：通过$('#users').append 行动态添加到DOM，是的。这就是……重点？
@ATOzTOA：没有。你检查过这是否不起作用吗？ (Yes, it works.)
我使用动态元素已经有一段时间了，而click() 从来没有为动态元素工作过。
@ATOzTOA：“动态”元素和“常规”元素之间没有区别，除非添加它们。如果您尝试在文档中实际存在之前在文档中找到一个元素，那当然是行不通的。但是，如果您正在创建元素，您将获得一个引用，您可以在其中添加您喜欢的所有事件侦听器。
@ATOzTOA 在不知不觉中，您的生命处于危险之中？

【解决方案3】：

我也遇到过这个问题，如果你把它放在document.ready里面就不行了。我认为这是我的语法，但事实并非如此。

使用

$(document).on('click', "input[id^='radiobox']", function () { 
    alert('hihi'); 
});

然后就可以了

【讨论】：

【解决方案4】：

您正在动态创建一个元素，因此正常的事件处理程序将不起作用。您必须使用on() 将事件处理程序附加到您的文档。

$(document).on('click', "#usuarios", function() {
    // do your job here
});

【讨论】：

【解决方案5】：

两种方式

1.jquery 1.7+

$(document).ready(function(){
  $('body').on('click', '#usuarios', function() {
     alert("click");
  });
});

2.jQuery

$(document).ready(function(){
  $('body').delegate('#usuarios','click', function() {
     alert("click");
  });
});

【讨论】：