2013-10-29 82 views
0

我目前被困在一個愚蠢的事情幾個小時,我看不到隧道盡頭的光。jQuery的克隆datepicker&submitName IE bug

我想克隆表格中的自動完成,日期選擇器&其他基於HTML模板的東西。我看到datepicker函數生成一個唯一的ID,所以我創建了沒有該類的模板,並在克隆過程中添加它。有趣的是datepicker顯示出來,但當我嘗試選擇一個日期時卡住了。

我試過,以及改變輸入contening的日期選擇器的名稱是唯一的,但它似乎IE瀏覽器有「名」的一個有趣的錯誤得到改變爲「submitName」

任何幫助&建議歡迎和欣賞。這裏是我的代碼如下:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <SCRIPT language="javascript"> 
     $(function() { 
      $(".datepicker").datepicker({ dateFormat: "dd/mm/yy" }); 
     }); 
    </SCRIPT> 



    <button class="addLeg">Add Leg</button> 
    <button class="delLeg">Remove Leg</button> 
    </span> 
<TABLE width="914px" border="0"> 
     <TR align="center"> 
     <TD width="23"></TD> 
     <TD width="140" class="g1">Date</TD> 
     <TD width="147" class="g1">Dep Time</TD> 
     <TD colspan="2" class="g1">Routing</TD> 
     <TD width="144" class="g1">Flight Time</TD> 
     <TD width="142" class="g1">Pax</TD> 
     </TR> 
</TABLE> 
<TABLE id="Leg" style="display:none" width="400px" border="0"> 
     <TR > 
     <TD class="g1"><INPUT type="checkbox" class="delCheckLeg" name="chk"/></TD> 
      <TD class="1"><INPUT type="text" id="tripdate" name="tripdate"></TD> 
     <TD class="g1"><INPUT type="text" name="deptime"/></TD> 
      <TD class="g1"><INPUT type="text" name="routingdep"/></TD> 
      <TD class="g1"><INPUT type="text" name="routingarr"/></TD> 
      <TD class="g1"><INPUT type="text" name="fttime"/></TD> 
      <TD class="g1"><INPUT type="text" name="pax"/></TD> 
     </TR> 
</TABLE> 
<div id="trip"> 
<TABLE id="Leg0" width="400px" border="0"> 
     <TR > 
     <TD class="g1"><INPUT type="checkbox" class="delCheckLeg" name="chk"/></TD> 
      <TD class="g1"><INPUT type="text" class="datepicker" id="tripdate0" name="tripdate0"></TD> 
     <TD class="g1"><INPUT type="text" name="deptime"/></TD> 
      <TD class="g1"><INPUT type="text" name="routingdep"/></TD> 
      <TD class="g1"><INPUT type="text" name="routingarr"/></TD> 
      <TD class="g1"><INPUT type="text" name="fttime"/></TD> 
      <TD class="g1"><INPUT type="text" name="pax"/></TD> 
     </TR> 
    </TABLE> 
</div> 

<script type="text/javascript"> 
    var uniqueId = 1; 
    var uniqueLeg = 1; 
    $('.addLeg').click(function() { 
     var copy = $('#Leg').clone(); 
     var formId = 'Leg' + uniqueLeg; 
     copy.attr('id', formId); 
     copy.removeAttr('style'); 

     copy.find(':input#tripdate').each(function() { 
      $(this).addClass('datepicker'); 
      $(this).datepicker({ dateFormat: "dd/mm/yy" }); 

      var dateid = 'tripdate' + uniqueLeg; 
      $(this).attr('id', dateid); 

       }); 

     $('#trip').append(copy); 
     uniqueLeg++; 
    }); 
</script> 

回答

0

它看起來像如果你調用datepicker後,它改變了元素的id它弄糟了它。

這是jsfiddle example。 我剛搬到下面一行

$(this).datepicker({ dateFormat: "dd/mm/yy" }); 

下面

$(this).attr('id', dateid); 

我也是在不斷變化的投入名稱加入,我想它在IE和它似乎工作。

+0

非常感謝!它就像一個魅力:)只有一個小問題,IE中的名稱/ submitName問題依然存在。我目前正在使用IE11。我會找出解決方案。謝謝 :) – poypoy