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>  ";
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>
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’]);
the below script is the php part:
Answer by Starx
I am guessing the event got messed up since you are the passing the event handler from
to
Change the event names, if you really want to handle them separately. More like updating your second handler as these will do goo
Since I dont have your markup structure, I am guessing, when you are loading
pull.php
to#commentarea
, another element with classconfirmdelete
should have been loaded as well, thus making the code execution incomplete logically.Put,
$(".confirmdelete").hide();
right abovee.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+ View all posts by Nabin Nepal (Starx)