使用 jQuery 动态创建新的 div 并使用它？

Question

我尝试过

$(document).ready(function(){
    var conntent = $("#conntent");
    $('#form_post').submit(function(){
        if($("#set").val() != ''){
             $.post('post.php', $("#form_post").serialize(), function(data){
                 conntent.append('<div class="item"><span>' + data + 
                 '</span></div>');
             });
        }
        $("#set").val('');
        return false;
     });    

   //Then I try to click on new the new element

        $('span').click(function(){
            alert("OK");
        });
   });

但是，在此之后我无法使用单击 spans

我认为在附加它们之后它们是否可能不是 DOM 的一部分。有什么建议吗？

Answer 1

这段代码是否：

$('span').click(function(){
    alert("OK");
});

在这段代码之前运行：

conntent.append('<div class="item"><span>' +data + '</span></div>');

这很有可能，因为 POST 是异步的。

您可以使用 jQuery 的 .live() 或 .delegate()< /code>绑定到尚未添加到 DOM 的元素。这样，当动态添加它们时，单击事件将自动绑定到它们。

或者，如果您只想在 POST 之后调用 .click(function()) ，那么您可以在响应中调用它，而不是在整个事件之外调用它。像这样的事情：

$.post('post.php', $("#form_post").serialize(), function(data){
    conntent.append('<div class="item"><span>' +data + '</span></div>');
    $('span').click(function(){
        alert("OK");
    });
});

就我个人而言，我会选择 .delegate() 方法，但整体结构取决于您。我不知道，在该页面的生命周期中可能存在您不想绑定的情况。

Answer 2

可能有 2 个可能的原因导致它不起作用
第一个你试图在“span”成为 DOM 的一部分之前绑定事件
解决方案是在此之后绑定事件：

conntent.append('<div class="item"><span>' +data + '</span></div>');
$('span:last').bind('click', handler);

第二，也许您应该使用像这样的上下文

$('span', conntent).bind('click',handler)

欢呼:)