Как добавить класс в тег формы, который присутствует только в событии клика?

Question

Как добавить класс в тег формы, который присутствует только в событии клика?Например: у меня есть это ...

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

, когда пользователь нажимает «показать форму», jQuery добавит новую форму внутри класса «контейнер»

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

примечание: форма все еще не существует при загрузке первой страницы .Он появляется только тогда, когда пользователь нажимает на промежуток.Есть ли способ, при котором jQuery будет просто загружаться после того, как форма покажет ? Вот как я планирую сделать это на jQuery, но это не работает, пожалуйста, исправьте это ...

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

Спасибо.

Answer 1

Как насчет

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

Это добавит нужный класс CSS к вашему идентификатору кнопки формы при нажатии.

Answer 2

Я думаю, что вы можете использовать событие .live jQuery.Это позволяет вам прикреплять события к элементам, созданным после загрузки DOM.Например, когда вы загружаете дополнительные элементы через AJAX.В этом простом примере вы нажимаете «кликни мне».Форма загружается динамически и ей присваивается активный класс.

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

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

});

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

Answer 3

вы можете сделать это таким образом .. не подтвердите, но должны решить вашу проблему.

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

попытаться проверить, существует ли идентификатор формы в DOM или нет .. вот так ..

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

надеюсь, это поможет вам ...

Answer 4

Я думаю, вы, возможно, ищете что-то столь простое?

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/

Answer 5

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

document.ready выходит за пределы кода привязки:

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