如何将类添加到仅在单击事件上出现的表单标记？

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

我认为您可能想利用 .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 2

怎么样

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

这会在单击时将所需的 CSS 类添加到您的表单按钮 ID 中。

Answer 3

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

document.ready 超出了绑定代码：

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

Answer 4

你可以这样做......不确认但应该解决你的问题。

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

尝试检查 DOM 中是否存在表单 id..像这样..

$("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 5

我想您可能正在寻找像这样简单的东西？

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/