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'类的新行，并将日期控件附加到它。

Answer 2

将绑定日历的代码放入函数中，在克隆并向页面添加新字段后，再次调用该函数再次绑定日历

添加div时JavaScript日历无效

2 个答案: