动态创建的Jquery嵌套元素有css样式和js事件被破坏

Question

我需要创建以下表单结构：

<div class="lg-pnl" id="logP">
  <form id="form">
    <div class="fields" id="fields1">

      <div class="txt">
       <label for="user" class="ent-u"></label>
       <input id="user" type="text" name="user" class="validate[required] text-input" placeholder="user"/>
     </div>

     <div class="txt">
       <label for="pw" class="ent-l"></label> 
       <input id="pw" type="password" name="password" class="validate[required] pw-input" placeholder="pwd"/> 
     </div>

     <div class="btn"> 
        <input type="submit" value="GO" id="subGO"/>
     </div>   
   </div>
  </form>
</div>

对于archieve来说，我正在使用非常非常丑陋的代码：

$("#logP").append('<form id="form">');
$("#logP form").append('<div class="fields"></div>');
$("#logP form .fields").append('<div class="txt"></div>');
$("#logP form .fields .txt").append('<label for="user" class="ent-u"/>');
$("#logP form .fields .txt").append('<input id="user" type="text" name="user" class="validate[required] text-input" placeholder="user"/>');
$("#logP form .fields .txt").append('<label for="pw" class="ent-l"/>');
$("#logP form .fields .txt").append('<input id="pw" type="password" name="password" class="validate[required] pw-input" placeholder="pwd"/>');
$("#logP form .fields").append('<div class="btn"></div>');
$("#logP form .fields .buttons").append('<input type="submit" value="GO" id="subGO"/>');

我真的需要保留这个DOM树，因为CSS样式适用于它。

但是js事件与表单和输入元素绑定时样式都不正常， 我丢失了这些函数的所有行为，例如，下面的代码片段不再起作用了。

div.lg-pnl div.txt input[type="text"],
div.lg-pnl div.txt input[type="password"]

$('.subGO').click(function() {
       $('#form').validation('validate');
}); 

 $(function() {
    $('input').keyup(function() {
       this.value = this.value.toUpperCase();
    });
});

所以我试图找到一些更好的方法来创建整个表单和它自己的元素 动态而不会丢失javascript中的样式和id / class引用 定义

我真的很感激你的建议

感谢。

Answer 1

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

使用

 $(document).on('click', '.subGO',function() {
     $('#form').validation('validate');
 }); 

将document替换为最近的静态容器。即"#logP"

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。