3

这是我的问题的一个例子：

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 没有“看到”它......因此，第二次点击功能没有触发。

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

4

4 回答 4

6

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

但是，您可以.on在下面的语法中使用类似的语法，该语法将查找具有 ID 的元素，该 IDsay-hello稍后将添加到“p”，

演示

  $("p").on('click', '#say-hello', function(){
    alert('test hello');
  })
于 2012-04-13T17:48:58.897 回答
1

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

$("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）内有一组项目时，通常会使用委托，这些项目都必须处理相同的事件。如果您只有一个“打招呼”，那么我建议您不要使用委托。​</p>

如果您需要能够多次单击按钮并将其插入多次，那么委派可能是正确的选择（但您需要停止使用硬编码的 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 而不是 id 来表示“say-hello”。）

于 2012-04-13T17:58:28.287 回答
0

你也可以试试这个，这样可以避免创建多个具有相同 ID 的 DOM 元素的问题。它通过将 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>单击中添加了单击处理程序。

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

于 2012-04-13T17:54:49.237 回答
0 
jQuery(".your_append_element_class").live('click',function() {
    // Your Code goes here..
});
于 2013-04-10T14:53:18.993 回答