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's .live() or .delegate()绑定尚未添加到DOM的元素。这样，当它们被动态添加时，click事件将自动绑定到它们。

或者，如果您只是希望在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

可能有两种可能的原因导致它不起作用 1st你试图在'span'之前绑定事件是DOM的一部分在此之后解决方案是绑定事件：

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

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

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

欢呼:)

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

2 个答案: