Question

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

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/

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

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

Answer 1

您的代码无效，因为当您将其绑定到点击处理程序时，$("#say-hello")在dom中不存在。

但是，您可以使用.on，如下面的语法，它会查找标识为say-hello的元素，稍后会将其添加到＆＃39; p＆＃39;，

DEMO

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

Answer 2

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

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

请注意，新创建的锚点的click分配是在另一个click回调中。

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

如果您需要多次单击该按钮并多次插入，则委派可能是正确的选项（但您需要停止使用硬编码ID）。或者......你可以这样做：

$("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。）

Answer 3

您也可以尝试这样做，这可以避免创建具有相同ID的多个DOM元素的问题。它通过在ID名称附加1到100之间的随机数来为每个ID提供一个随机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>点击中添加了一个点击处理程序。

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

Answer 4

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

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

4 个答案: