第二種形式選擇在應用jQuery-UI對話框後消失

我正在使用jQuery 1.7.2和jQuery UI 1.8.20。我的一個網頁之一，我有一個包含表單一個簡單的對話框：第二種形式選擇在應用jQuery-UI對話框後消失

  $('#dialog-addArtToCompetition').dialog({ 
      autoOpen: false, 
      width:  400, 
      height:  500, 
      modal:  true, 
      buttons: { 
       "Add": function() { 
        $('#addToCompetition').ajaxSubmit({ 
         accept:   'application/json', 
         dataType:  'json', 
         //beforeSubmit: showRequest, // pre-submit callback 
         success:  function(comp, statusText, xhr, $form) { 
          alert("Art added"); 
          $(this).dialog("close"); 
         }, 
         error:   function(xhr, ajaxOptions, thrownError) { 
          alert("Some error occured"); 
          $(this).dialog("close"); 
         }, 
         resetForm:  true 
        }); 

        $(this).dialog("close"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      }, 
      close:  function() {} 
     }); 
    });

但是，當我打開對話框，第二個元素：

<div id="dialog-addArtToCompetition" title="Add Art to Competition"> 
    <form id="addToCompetition" name="addToCompetition" 
     action="${competition_new_base}" method="post"> 
     <fieldset> 
      <input type="hidden" name="artPieceId" id="artPieceIdHidden" value="${artPiece.id}" /> 
      <label for="artCategoryId">Category: </label> 
      <select name="artCategoryId" id="artCategoryIdSelect" 
       multiple="false" style="width: 200px; height: 50px;"> 
      </select> <br /> 
      <label for="competitionPrice">Price: </label> 
      <select name="competitionPrice" id="competitionPriceSelect" 
       multiple="false" style="width: 200px; height: 50px;"> 
      </select> 
     </fieldset> 
    </form> 
</div>

然後我用下面的註冊對話框不見了。我仔細檢查了生成的HTML，查看源代碼，原始HTML文件確實有缺失的選擇，但是當我使用Chrome的開發工具查看它時，它在元素標記中缺失。而且，是的，我正在查看正確的DIV，因爲我知道jQuery在創建對話框時會將對話移到身體上。

爲什麼jQuery刪除我的表單元素？

來源

2012-08-17 CodeChimp

這裏顯示得很好：http://jsfiddle.net/j08691/kKSkB/。 – j08691 2012-08-17 20:03:58

它必須是HTML中的東西。我從HTML中複製了由瀏覽器呈現的完整DIV和JS標記，現在它不再工作了：http://jsfiddle.net/kKSkB/1/ – CodeChimp 2012-08-17 23:31:33

看起來有一些奇怪的事情與空選擇。當我提出了以下變化

<div title="Add Art to Competition" id="dialog-addArtToCompetition"> 
<form method="post" action="/ArtSite/competitions/new" name="addToCompetition" id="addToCompetition"> 
    <fieldset> 
     <input value="" id="artPieceIdHidden" name="artPieceId" type="hidden"/> 
     <label for="artCategoryId">Category: </label> 
     <select style="width: 200px; height: 50px;" multiple="false" id="artCategoryIdSelect" name="artCategoryId"><!-- empty --></select><br/> 
     <label for="competitionPrice">Price: </label> 
     <select style="width: 200px; height: 50px;" multiple="false" id="competitionPriceSelect" name="competitionPrice"><!-- empty --></select> 
    </fieldset> 
</form>

這一切似乎工作。

來源

2012-08-17 23:45:44 CodeChimp

第二種形式選擇在應用jQuery-UI對話框後消失

回答

相關問題