Question

我有一段代码可以在页面加载时在div中加载注释。

$.get("ajax_getcomments.php", { itemid: <? echo $id; ?>, type: 1 },
    function(data){
        $('#comments').html(data.comment_data);
    }, "json");

在这些结果中，这是一个附加到每个评论的链接

<a href="/ajax_action.php?deletecomment=ID" class="delete_comment"></a>

按下该链接后，整个注释div将消失在视图之外。我使用以下代码：

$('.delete_comment').click(function() {
        var comment_id = $(this).parent().parent().attr('id');
        var objPDiv = $(this).parent().parent();
        $.get('./ajax_action.php', {id:comment_id, action: 'delete_comment', ajax: 1}, function(data) {
            objPDiv.animate({ opacity: 'hide' }, "slow");
        });
        return false;
    });

问题在于......它不适用于jquery从ajax_getcomments.php获取的html。

如果我将html复制/粘贴到并且不执行初始GET调用，它可以完美地工作。

Answer 1

问题是.click()仅适用于与您的选择器匹配的现有元素。要绑定到将来的元素，您需要使用.live()：

$('.delete_comment').live('click', function() {
        var comment_id = $(this).parent().parent().attr('id');
        var objPDiv = $(this).parent().parent();
        $.get('./ajax_action.php', {id:comment_id, action: 'delete_comment', ajax: 1}, function(data) {
            objPDiv.animate({ opacity: 'hide' }, "slow");
        });
        return false;
});

.live()为与您的选择器匹配的所有当前和未来元素附加事件处理程序。因此，当jQuery看到您在DOM中插入了与.live()中使用的选择器匹配的新元素时，它会自动将onClick事件的处理程序附加到新元素。

Answer 2

事件（在这种情况下单击）附加到最初执行javascript时的所有元素'.delete_comment'（通常在页面加载时）。如果稍后创建新元素，则除非您明确告诉jQuery附加它，否则不会附加click事件。

您可以通过实时功能执行此操作：

$('.delete_comment').live('click', function() {
    // Your code
});

这将指示jQuery将函数绑定到.delete_comment元素，无论它现在还是将来出现。

Answer 3

您应该使用.delegate()来监视容器div级别的删除操作。

$('#comments').delegate('.delete_comment','click', function(e) {
    e.preventDefault(); 
    // your deletion code here
});

对另一个动作返回的html执行jquery操作？

3 个答案: