How to add a class to a form tag that only present on click event?

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>
<d开发者_StackOverflow中文版iv 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.

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");
});

How about

$(document).ready(function () {
    $("#form-button").click(function() {
        $(this).addClass("yourCSSclass");
  })
});

This will add the desired CSS class to your form button ID when clicked.

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

document.ready goes outside of the binding code:

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

you can do it in this way..not confirm but should solve your problem.

<form id="form"></form>

try to check form id exist in DOM or not..like this..

$("span").click(function(){
var formId= $("em").attr("id");
if(formId!=undefined && formId == "form"){
   $(this).addClass("active");// will add a class on span
   $('#form').addClass("active"); // will add a class on form tag
     }
});

hope this helps you...

I think you might be looking for something as simple as this?

HTML

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

jQuery

$('.container').hide();

$('#showForm').click(function(){
    $('.container').show();    
}); 

http://jsfiddle.net/jasongennaro/9YNLP/1/