jquery cloning datepicker& submitName IE bug

时间:2013-10-29 17:26:57

标签: jquery jquery-ui datepicker

我目前在一个愚蠢的事情上呆了好几个小时,我看不到隧道尽头的光线。

我尝试使用自动完成,datepicker和amp;来尝试克隆表格中的表格。基于HTML模板的其他东西。我看到datepicker函数生成一个唯一的ID,因此我在没有类的情况下创建了模板,并在克隆过程中添加了它。有趣的是,当我尝试选择日期时,日期选择器会出现但会卡住。

我也试过更改输入的名称,将日期选择器作为唯一标识,但似乎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>

1 个答案:

答案 0 :(得分:0)

看起来如果在调用datepicker之后更改了元素的id,它就会混淆它。

这是一个jsfiddle example。 我刚刚移动了以下行

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

下面

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

此外,我添加了更改输入名称,我在IE中尝试了它似乎工作。