jquery comment system on.(...click) issue - php

Question

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">
<img src="<? echo $row2['miniavatar']; ?>" height="52" width="52" /> <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

What you need to do is use 'on' like it's meant. Right there all you're doing is binding a .click event to that element in the selector.
What you want is:
$('body').on("click", ".deletecomment", function(e){
or something in place of 'body' that is a wrapper that can watch that level of the DOM for new elements to apply the event too.

Answer 2

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.

Answer 3

You should look into the event delegation system http://api.jquery.com/on/

Answer 4

Try JQuery live. more info It should be something like the following
<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>