如何在jQuery中访问新添加的HTML元素 [英] How do you access newly appended HTML elements in jQuery

问题描述

以下是我的问题示例：

HTML

<p><a class="clickme" href="#">I would like to say:</a></p>

jQuery

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

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

以下是示例代码的小提琴：
http://jsfiddle.net/johnmorris/2UVYd/2/

Here's a fiddle with the example code: http://jsfiddle.net/johnmorris/2UVYd/2/

第一次点击功能就好了。但是，警报（或任何其他功能）不会触发新添加的元素。我基本上明白附加的元素在页面加载时不存在，所以jQuery没有看到它......因此，第二次点击功能没有触发。

The first click function fires just fine. But, the alert (or any other function) will not fire on the newly appended elements. I basically understand that the appended element didn't exist on page load, so jQuery doesn't "see" it... thus, the second click function not firing.

我只是想知道是否有办法解决这个问题。而且，如果是这样，它是什么。我似乎无法理解这一点。

I'm just wondering if there's a way around that. And, if so, what is it. I can't seem to get this figured out.

推荐答案

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

You need to wait to assign the event until the element exists:

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

请注意新的点击创建锚点是另一个点击回调。

Notice that the click assignment for the newly created anchor is INSIDE the other click callback.

@Vega正在使用另一种称为委托的技术单击say-hello到 p 而不是锚本身。单击锚点时，事件通过DOM冒泡，并被 p 标记上的事件侦听器捕获。这可以正常工作，但这可能不适合授权。当您在公共容器（例如UL中的LI）内部有一组项目时，通常会使用委托，这些项目都必须处理同一事件。如果您只有一个说你好，那么我建议不要使用委托。

@Vega is using another technique called "delegation" where you assign the click for "say-hello" to the p instead of the anchor itself. When the anchor is clicked the event "bubbles" up through the DOM and is gets caught by the event listener on the p tag. This works correctly, but this may not be the right time for delegation. Delegation is usually used when you have a collection of items inside of a common container (e.g. LIs in a UL) that all have to handle the same event. If you just have one "say-hello" then I would recommend not using delegation. ​

如果你需要多次点击按钮并多次插入按钮，那么授权可能是正确的选择（但你会需要停止使用硬编码ID）。或者......你可以这样做：

If you need to be able to click the button multiple times and have it inserted multiple times then delegation might be the right option (but you'll need to stop using a hard-coded ID). Or... you could do it this way:

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

此代码实际上深入研究了新创建的元素，并在附加到DOM之前附加事件。 （哦，注意我使用的是className而不是say-hello的id。）

This code actually digs into the newly created elements and attaches the event before appending to the DOM. (Oh, and notice that I'm using a className rather than an id for "say-hello".)

这篇关于如何在jQuery中访问新添加的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！