动态创建的 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>

为了存档，我使用了下面非常非常丑陋的代码：

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

委托事件的优点是它们可以处理来自后代元素的事件，这些事件会在以后添加到文档中。