March 4, 2012

jquery comment system on.(…click) issue

Question by Anonymous

I’m having trouble keeping event handlers attached to future loaded selectors. For example, when pull.php is loaded, the confirmdelete is no longer hidden, and also the click event handlers no longer exist. I am new to jquery and ajax. Below is my code.
$id= (int)strip_tags($_GET[‘id’]);

$(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>

the below script is the php part:

<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 by Starx

I am guessing the event got messed up since you are the passing the event handler from

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

to

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

Change the event names, if you really want to handle them separately. More like updating your second handler as these will do goo

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

Since I dont have your markup structure, I am guessing, when you are loading pull.php to #commentarea, another element with class confirmdelete should have been loaded as well, thus making the code execution incomplete logically.

Put, $(".confirmdelete").hide(); right above e.preventDefault() to see if I am right.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!