jQueryオーバーレイフォーラムフィールドのオーバーレイ

Question

私は大きなフォームを作ったと言います。

$("#submiter").click(function() { 
    $.post("submiter.php", 
     $("#formmain").serialize(), 
     function(data) { 
     $.each(data,function(){ 
      id=thisid; 
      error=this.error; 
      //want some code here to over lay div with the id got with this.id 
     }) },'json') 
}); 

を：今、私はこれはJS持っ

<div id="submiter">Submit</div> 

：

<form> 
... 

<tr> 
<td><div id="username"><input name="username" id="username" type="text"/></div></td> 
</tr> 

... 
</form> 

は今、私はこのような下に何かにdiv要素を配置：
フォームの一つの要素は、このようなことしてみましょう

PHPはこの形式のjsonを返します

[{id:formelementid,error:The error}]

質問： 方法のdivは#usernameをとする単純化のために、その中にエラーが発生したクラスerrorsで完全のdivをオーバーレイするには？ デモは、これはCSSの質問です

Answer 1

非常にいいだろう：それは、

$('<div class="errors"/>').appendTo('#my_form'); 

あなたの例ではでしょう：あなたは、これはjQueryを使ってDIV追加したい場合は、append^[docs]を使用

.errors { 
    position:absolute; 
    z-index:2; /* Or higher than parent div */ 
    width:100%; 
    height:100%; 
    background-color:#FFF; /* Whatever */ 
} 

次のように動作します。

$("#submiter").click(function() { 
    $.post("submiter.php", 
     $("#formmain").serialize(), 
     function(data) { 
      var errors = ''; 
      $.each(data,function(){ 
       id=thisid; 
       error=this.error; 
       errors += error + '<br />'; 
      }); 
      $('<div class="errors"/>').appendTo('#my_form').html(errors); 
     },'json') 
}); 

ユーザーがクリックハンドラーを適用するだけです：

$('.errors').live('click',function(){ 
    $(this).remove(); 
});