0

我目前被困在一个愚蠢的事情上几个小时，我看不到隧道尽头的光。

我正在尝试使用基于 HTML 模板的自动完成、日期选择器和其他内容来克隆表格。我看到 datepicker 函数生成了一个唯一的 ID，所以我制作了没有类的模板，并在克隆期间添加了它。有趣的是，日期选择器出现了，但是当我尝试选择日期时卡住了。

我也尝试过将包含 datepicker 的输入的名称更改为唯一但似乎 IE 有一个有趣的错误，即 'name' 变成了 '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>
4

1 回答 1

0

看起来如果你在调用 datepicker 之后更改元素的 id，它就会搞砸。

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

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

以下

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

我还添加了更改输入名称，我在 IE 中尝试过，它似乎可以工作。

于 2013-10-29T18:57:00.077 回答