jQuery trouble with .remove()

I am making an inline comment reply system

It's mostly working except that I cannot seem to apply a .remove() to the DIV's created by my reply link - to "cancel" the reply

My jQuery code is:

    <script type="text/javascript">
    $(function() {
        <!-- jQuery inline replies -->
        $("a.reply_link").click(function(){
            this_id = this.id;
            $("#reply_link_div" + this_id).after('<div id="reply_div' + this_id + '" class="reply_div"><form method="post" action="<?php echo SITE_URL . "/comment"; ?>">'+
                                                 '<input type="hidden" name="post_id" value="<?php echo $view[0]['id']; ?>" />'+
                                                 '<input type="hidden" name="post_slug" value="<?php echo $_REQUEST['post']; ?>" />'+
                                                 '<input type="hidden" name="comment_thread" value="' + this_id + '" />'+
                                                 '<strong>reply</strong><div style="padding-bottom:4px;">'+
                                                 '<textarea name="comment_text" id="comment_text' + this_id + '" rows="1" style="width:100%;" /></textarea>'+
                                                 '</div><input type="submit" name="submit" value="submit" />&nbsp;&nbsp;&nbsp;<a href="#" class="reply_cancel_link" id="' + this_id + '">cancel</a></form></div>')
            $("#reply_link_div" + this_id).hide(开发者_如何学运维);
            return false;
        });

        <!-- jQuery reply cancel -->
        $('a.reply_cancel_link').click(function() {
            this_id = this.id;
            $('#reply_div' + this_id).remove();
            $("#reply_link_div" + this_id).show();
            return false;
        });
    });
    </script>

My HTML/PHP code is:

<table class="comment_table">
    <tr class="comment_text_outer_tr"><td colspan="4" class="comment_text_td">Comment text blah blah
    <div id="reply_link_div<?php echo $comment_id; ?>"><a href="#" id="<?php echo $comment_id ?>" class="reply_link" style="float:right;">reply</a></div>
    </td></tr>
</table>

When the user clicks the "reply" text, jQuery draws a reply_div underneath, inside this div is a link to "cancel" the reply

When the user clicks the cancel link, it should run the code under "jQuery reply cancel", which is supposed to .remove() the associated reply_div

When I click cancel, nothing happens and there are no errors

Can you see what's wrong with my code? Thanks

the ".click()" in jquery is a short-cut for ".bind('click', handler)" link text

you should use a ".live('click', handler)" for dynamically created elements.

When your click events are added to the cancel buttons, those cancel buttons don't actually exist yet. You should use .live('click', cancelAction). .live will attach a listener to any element that fits the selector as soon as it's created.

You also have multiple a elements with the same id. I often get weird, undefined behavior when I accidentally do this. It won't hurt to give your remove link a unique id like

<a href="#" class="reply_cancel_link" id="remove_' + this_id + '">cancel</a>

Also, regarding the .live('click', cancelAction) business, you could also create the cancel link and wire up the click event thusly.

var cancelLink = $('<a href="#" class="reply_cancel_link" id="remove_' + this_id + '">cancel</a>');
cancelLink.click(function() {...});

Finally finally, if you do this then your cancel link won't put that # in the url bar.

cancelLink.click(function(event) {
  event.preventDefault();
  ...
});