jQuery在ajax调用后停止工作

Question

我使用http://weareoutman.github.io/clockpicker/中的 bootstrap和一个时钟选择器

加载主页面时它工作正常.但是当我使用AJAX调用将另一个php文件中的新内容加载到div中时,clockpicker停止工作.

Clockpicker在页面底部使用jQuery.

我用ajax加载的新内容也包含clockpicker按钮.但它不会起作用.页面底部的jQuery可能有问题吗？

我是jQuery的新手,不知道语法和语言.

<?PHP

echo "<div class=\"input-group clockpicker col-md-6\" data-placement=\"right\" data-align=\"top\" data-autoclose=\"true\">";
  echo "<input 
    type=\"text\" 
    class=\"form-control input-sm\" onchange=\"ajax_function('kuk','alter_schedule.php?ltime='+this.value+'&cid=".$child_id."&date=".$row['date']."&what=3')\" value=\"".date("H:i", strtotime($row['schedule_start']))."\">";
  echo "<span class=\"input-group-addon\">";
    echo "<span class=\"glyphicon glyphicon-time\"></span>";
  echo "</span>";
echo "</div>";

?>

<script type="text/javascript">

$('.clockpicker').clockpicker();

</script>

Answer 1

jQuery在运行时只知道页面中的元素,因此添加到DOM的新元素无法被jQuery识别.为了解决这种使用事件委托问题,将新添加的项目中的事件冒泡到jQuery在页面加载时运行时在DOM中的某个点.许多人使用它document作为捕捉起泡事件的地方,但没有必要在DOM树上走得那么高.理想情况下,您应该委托给页面加载时存在的最近的父级.