添加 div 时 JavaScript 日历不起作用

Question

我有一个 JS 日历脚本，可以在一个 div 中正常工作。我还有一个 jQuery 脚本，它获取 div 并克隆它。不过，日历脚本在克隆的 div 中不起作用。日历不弹出。这是我的代码:

<script type="text/javascript" src="tcal.js"></script>

<script>
$(document).ready(function () {
$('#addRow').click(function () {
    $('<div/>', {
        'class': 'extraPerson',
        html: GetHtml()
    }).hide().appendTo('#container1').slideDown('slow');
});

function GetHtml() {
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=puloc]')[0].name = "puloc" + len;
$html.find('[name=pudate]')[0].name = "pudate" + len;
$html.find('[name=putime]')[0].name = "putime" + len;
$html.find('[name=punumber]')[0].name = "punumber" + len;
return $html.html();
}
});
</script>


<div class="extraPersonTemplate">

<table frame="box" style="width:500px">
      <tr>
      <td colspan="3">
  <?php
        //php code to access mysql database 

        echo '<select name="puloc" style="width: 482px">'; 
        echo '<option value="">--Select Origin Location--</option>'; 
        while($opt = mysql_fetch_array($resultOptions)) 
        { 
           echo '<option value="'.$opt['displayName'].'">'.$opt['displayName'].'</option>'; 
        } 
        echo '</select>'; 
     ?>
     </td>
     </tr>
     <tr>
     <td>
   <link rel="stylesheet" type="text/css" href="tcal.css" />
   <script type="text/javascript" src="tcal.js"></script> 
   Pick up date:<BR>
   <input class="tcal" placeholder="" type ="text" name="pudate" style="width:130px">
</td>
<td>
   Pick up time<br>
   <input placeholder="" type ="text" name="putime" style="width:150px">
</td>
<td>
   Pick up number<BR>
   <input placeholder="" type ="text" name="punumber" style="width:150px">
</td>
</tr>
</table>



<div></div>
</div>


<div id="container1">
   <script type="text/javascript" src="tcal.js"></script> 
</div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add Origin</p></a>

这是我在pastebin上的javascript文件:http://pastebin.com/WEhJHUKe

Answer 1

tCal 代码仅在生成页面时运行一次(请参阅 js 类中的最后一个方法，该方法为 window.onload 添加事件处理程序)。它查看当时的页面，并将 tCal 元素添加到它看到的带有“tcal”类的行。添加另一行(即使使用该类)也不会触发另一次更新。

当您添加另一行时，尝试再次运行 f_tCalInit() - 这应该会强制它再次检查页面，找到带有“tcal”类的新行，并将日期控件附加到它。