Question

I have a problem with my form submission and here is the deal. I’m creating an image website and I want to create comments for every image so I have a anchor link which when clicked on shows the comments form, that is loads the html into the web page which wasn’t inside at first place, so the form loaded inside the page is not submitting.

Is it possible that forms which are dnynamicly loaded into webpage can’t submit? what can be other problems with this? I even tried putting something like <a href="#" id="test">Click me</a> inside the loaded content and I added

$("#test").click(function(){
alert("SOMETHING");
});

to my javascript and it won’t alert as well.. what am I doing wrong ?

EDIT

Ok here is how I load form ..

I have an anchor link below my image :

<a href="javascript:;" onclick="showComments('22');" class="answer_comment">Add image content</a>

Here is javascript which is outside document ready function :

function showComments(post){
         var xHTML = "<div class=\"addComment\">";
         xHTML += "<form action=\"<?=base_url()?>images/post_comment/" + post + "\" method=\"post\" id=\"comment_form\" name=\"comment_form\">";
         xHTML += "<input type=\"hidden\" id=\"comment_post_id\" name=\"comment_post_id\" value=\"" +post + "\"/>"; 
         xHTML += "<textarea name=\"comment_text\" class=\"comment\" rows=\"8\" cols=\"40\"></textarea>";
     .....

Like this I fill up my comments form.. need more code ?

Answer 1

Dynamically loaded elements have to be rigged up as well in your case to alert, you want:

$("#test").live('click', function() {
  alert("SOMETHING");
});

This will fire for any element with id="test", whether it’s ajax loaded or not. The same style should be used for whatever handler you want to use. Read the .live() documentation for the full story…basically it sits up at the root DOM level listening for clicks and acts on them, so it doesn’t care what was or wasn’t there when you defined the event handler, which is what you want for dynamically loaded content.