Dynamically added form doesn't found in dom?

I'm trying to create a comment module that allows people to reply to comments made by others. For example, if I commented something on someone's website, someone else can reply to my comment (comments nesting).

I have the code below to dynamically add the comment form when someone clicks reply but for some reason DOM can't see it. Any ideas?
$('#add_comment').ajaxForm({
	type: 'post',
	dataType:  'json', 
	beforeSubmit: function() {

	},
	success: function(data) {
		if (data.status == 'success')
		{
			$('#comments').prepend('<table><tr><td>' + data.message + '<a href="#" id="reply">reply</a></td></tr></table><br />');
		}
	}
});

$('a#reply').live('click', function(event) {
	$(this).after('<br /><form action="backstage/dashboard/ajax_add_comment" method="post" accept-charset="utf-8" name="add_comment" id="add_comment"><table><tr><td></td><textarea name="comment" cols="50" rows="5" id="comment" ></textarea><input type="submit" name="button" value="Submit" id="button" class="button"  /></tr></table></form>')
	return false;
});

Open in new window

dsrnuAsked:
Who is Participating?
 
Kiran SonawaneProject LeadCommented:
If there are multiple comments, there are multiple reply with same ID. May be this causes problem to identify the dom. Ideally, dom id should be unique.
0
 
Ivo StoykovCommented:
text area is out of the cell
should be

$(this).after('<br /><form action="backstage/dashboard/ajax_add_comment" method="post" accept-charset="utf-8" name="add_comment" id="add_comment"><table border="1"><tr><td><textarea name="comment" cols="50" rows="5" id="comment" > </textarea><input type="submit" name="button" value="Submit" id="button" class="button"  /></td></tr></table></form>')

HTH

Ivo Stoykov
0
 
evedderCommented:
also when you create dynamic elements with jquery, you should use the .live() method instead of .click()
check the info here http://api.jquery.com/live/ it explains how it works and why dynamic created elements dont respond the same way
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
dsrnuAuthor Commented:
still not working..
0
 
Ivo StoykovCommented:
add a prompt and see what's in there, i.e.

$('a#reply').live('click', function(event) {
      $(this).after('<br /><form action="backstage/dashboard/ajax_add_comment" method="post" accept-charset="utf-8" name="add_comment" id="add_comment"><table><tr><td></td><textarea name="comment" cols="50" rows="5" id="comment" ></textarea><input type="submit" name="button" value="Submit" id="button" class="button"  /></tr></table></form>')
prompt('d', this.innerHTML);
      return false;
});
0
 
leakim971PluritechnicianCommented:
>still not working..

Did you understood sonawanekiran comment?
If you did not understand him, you may ask him to give you more info about the resolving
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.