如何在jQuery中访问新添加的HTML元素

下面是我的问题的一个例子：

HTML

jQuery

$（“a.clickme”）。单击（函数（）{
$（'p'）。附加（''）；
});
$（“#打招呼”）。单击（函数（）{
警报（“测试你好”）；
});

下面是对示例代码的修改：

第一次单击功能可以正常启动。但是，警报（或任何其他功能）不会对新添加的元素触发。我基本上理解页面加载中不存在附加元素，所以jQuery不会“看到”它。。。因此，第二次单击功能不会触发

---

我只是想知道有没有办法。如果是，那是什么呢。我似乎无法解决这个问题。

您的代码无法工作，因为当您将dom绑定到click handler时，

$（“#打招呼”）

在dom中不存在

但是，您可以像下面的语法一样使用

.on

，它将查找ID为

say hello

的元素，该元素稍后将添加到“p”中

---

您也可以尝试这样做，这样可以避免创建具有相同ID的多个DOM元素的问题。它通过在ID名称后面添加一个介于1和100之间的随机数，为每个元素提供一个随机ID：

<script>
    $("a.clickme").click(function() {
        var newId = "say-hello" + Math.floor((Math.random()*100)+1);
        $('p').append('<div><a href="#" id="' + newId +'">Hello</a></div>');

        $("#"+newId).click(function(){
            alert('test hello');
        })
    });

</script>

$（“a.clickme”）。单击（函数（）{
var newId=“say hello”+Math.floor（（Math.random（）*100）+1）；
$（'p'）。附加（''）；
$（“#”+newId）。单击（函数（）{
警报（“测试你好”）；
})
});

注意，我在现有的

click中添加了一个click处理程序

---

随机性不能保证没有冲突，但要使范围足够大，这是一个安全的假设。或者只使用计数器来确保没有ID冲突。

您需要等待分配事件，直到元素存在：

$("a.clickme").click(function() {
    $('p').append('<div><a href="#" id="say-hello">Hello</a></div>');
    $("#say-hello").click(function(){
        alert('test hello');
    });
});

---

这段代码实际上深入到新创建的元素中，并在附加到DOM之前附加事件。（哦，请注意，我使用的是类名而不是id来表示“打招呼”。

根据用例的不同，委派可能是错误的选择。如果只有一个元素，则无需授权…谢谢！我最终选择了@Prestaul代码，但你的代码也很好。谢谢你的帮助！需要注意的另一件事是：如果多次单击，您的

a

将附加具有相同

id

的多个元素。这违反了HTML规范，因为

id

s在文档中应该是唯一的。我建议改为使用

class

。谢谢！我的实际代码确实附加了一个类。我发布了这个示例，因为我的实际代码非常长且复杂。但是，我已经想到了这一点。再次感谢！：）这对我有用。事实上，他们都“工作”，但这就是我所做的。谢谢你的帮助！你们真是太棒了！：）谢谢你的帮助！我可能最终使用了随机数的概念，但目前@Prestaul的代码似乎效果最好。再次感谢！已弃用，并已在jQuery 1.9中删除。改用。

  $("p").on('click', '#say-hello', function(){
    alert('test hello');
  })

<script>
    $("a.clickme").click(function() {
        var newId = "say-hello" + Math.floor((Math.random()*100)+1);
        $('p').append('<div><a href="#" id="' + newId +'">Hello</a></div>');

        $("#"+newId).click(function(){
            alert('test hello');
        })
    });

</script>

$("a.clickme").click(function() {
    $('p').append('<div><a href="#" id="say-hello">Hello</a></div>');
    $("#say-hello").click(function(){
        alert('test hello');
    });
});

$("a.clickme").click(function() {
    $('<div><a href="#" class="say-hello">Hello</a></div>').find('.say-hello')
            .click(function(){
                alert('test hello');
            })
        .end()
        .appendTo('p');
});

jQuery(".your_append_element_class").live('click',function() {
    // Your Code goes here..
});