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识别。为了解决这个问题，请使用event delegation，将新添加的项目中的事件冒泡到jQuery在页面加载时运行时的DOM中的某个点。许多人使用document作为捕捉起泡事件的地方，但没有必要在DOM树上走得那么高。理想情况下you should delegate to the nearest parent that exists at the time of page load.

jQuery在ajax调用后停止工作

1 个答案: