Question

我无法将事件处理程序附加到未来加载的选择器上。例如，当加载pull.php时，不再隐藏confirmdelete，并且click事件处理程序也不再存在。我是jquery和ajax的新手。以下是我的代码。 $ id =（int）strip_tags（$ _ GET [＆＃39; id＆＃39;]）;

$(document).ready(function() { //make a comment delete js file eventually, just so we can reference the source
    $('.confirmdeletecomment').hide();
    $('.deletecomment').on("click", function(e){
        var cid = $(this).attr("id");
        $('a#c'+cid).show(500, function(){ //right now as call back
            $(this).on("click", function(e){
            var id = $(this).attr("id"); 
            var did = id.substring(1);  
            $.post(

                'deletecommentdata.php?cid='+did,

                function(data)
                {
                   $("#commentarea").load("pull.php?id=<? echo $id; ?>");
                   $("#comment").val("");
                   $('.confirmdeletecomment').hide();

                }

                )

                e.preventDefault();//so it doesn't interpret is as an anchor link

                });



                });

    e.preventDefault();//so it doesn't interpret is as an anchor link
    });


});

</script>

以下脚本是php部分：

<div id="commentarea">

<?

$query = mysql_query("SELECT users.user_id, users.username, users.miniavatar, comments.comment_id, comments.comment, comments.time_stamp FROM users INNER JOIN comments ON users.user_id=comments.products_users_user_id WHERE comments.products_products_id = '$id' ORDER BY comments.time_stamp DESC");

while($row2 = mysql_fetch_array($query)) {

?>
<div id='singlecomment'>

<hr class="comment" />
<table>
<col width="*" />
<col width="400" />
<col width="*" />    
<tr>
<td valign = "top" rowspan="2">
<a href="collection.php?profile=<? echo $row2['user_id']; ?>"><img src="<? echo $row2['miniavatar']; ?>" height="52" width="52" /></a> <br />
<?  
if ($user_id == $row2['user_id']) { 
    $cid = $row2['comment_id'];


    echo "<a id='$cid' class='deletecomment' title='Delete Post'>X</a> &nbsp";
    echo "<a id='c$cid' class='confirmdeletecomment'>confirm</a>";
}   
?>
</td>
<td valign="top">
<a class="blue" href="collection.php?profile=<? echo $row2['user_id']; ?>"> <? echo $row2['username']; ?> </a>
</td>
<td> 
<span class="date"><? echo date("F j, Y g:i a ", strtotime($row2['time_stamp'])); ?> </span>
</td>
<tr>
<td colspan="2">
<? echo stripslashes($row2['comment']); ?> <br/><br/>
</td>
</tr>
</table> 
</div>

Answer 1

你需要做的就是像它的意思一样使用'on'。你正在做的就是将.click事件绑定到选择器中的那个元素。

你想要的是：

$('body').on("click", ".deletecomment", function(e){

或代替'body'的东西，它是一个包装器，可以监视DOM的级别，以便新元素也可以应用该事件。

Answer 2

我猜这个事件搞砸了，因为你是从

传递事件处理程序

$('.deletecomment').on("click", function(e){

到

 $(this).on("click", function(e){

如果您确实想要单独处理它们，请更改事件名称。更像是更新你的第二个处理程序，因为这些将做goo

$(this).on("click", function(event){

由于我没有你的标记结构，我猜，当你将pull.php加载到#commentarea时，另一个类confirmdelete的元素也应该被加载，从而使得代码执行逻辑上不完整。

将$(".confirmdelete").hide();放在e.preventDefault()正上方，看看我是否正确。

Answer 3

您应该查看事件委派系统http://api.jquery.com/on/

Answer 4

尝试JQuery live。 more info它应该类似于以下内容

<script type="text/javascript">

$(document).ready(function() { //make a comment delete js file eventually, just so we can reference the source
    $('.confirmdeletecomment').hide();
    $('.deletecomment').live("click", function(){
        var cid = $(this).attr("id");
        $('a#c'+cid).show(500, function(){ //right now as call back
            $(this).on("click", "a", function(e){
            var id = $(this).attr("id"); 
            var did = id.substring(1);  
            $.post(

        'deletecommentdata.php?cid='+did,

        function(data)
        {
            $("#commentarea").load("pull.php?id=<? echo $id; ?>");
            $("#comment").val("");
            $('.confirmdeletecomment').hide();

        }

        )

            e.preventDefault();//so it doesn't interpret is as an anchor link

            });



        });

        e.preventDefault();//so it doesn't interpret is as an anchor link
        });


});

</script>

jquery评论系统on。（... click）问题

4 个答案: