Question

How to add a class to a form tag that only present on click event?
For example: I do have this…

<p>Below is a form: <span>show form</span></p>
<div class="container"></div>

when user clicks the “show form”, jQuery will add a new form inside the class “container”

<p>Below is a form:</p>
<div class="container">
   <form>
       <-- some code here -->
   </form>
</div>

note: The form still does not exist on first page load. It will only shows up when a user clicks on the span. Is there a way wherein the jQuery will just load after the form shows up?

This is how I plan to make it on jQuery, but it don’t work, please correct this…

$("span").click(function(){
   $(".container form").ready(function(){
      $(this).addClass("active");
   })
})

Thank you.

Answer 1

I think that you might want to make use of the .live jQuery event. This allows you to attach events to elements created after the DOM has loaded. For instance when you load additional elements via AJAX. In this simple example you click on ‘click me.’ A form is dynamically loaded and it is given the active class.

http://jsfiddle.net/v5j42/1/

$("span#clicker").click( function() {
   $("div#container").append('<form class="foo"></form>');

});

$(".foo").live('DOMNodeInserted', function() {   
    $(this).addClass("active");
});