jquery - JQuery 代码在我附加的 HTML 中不起作用
问题描述
当我单击一个按钮时,我有这个附加的文本框,但是 jquery 中的 .datepicker 代码不起作用,但在普通的文本框中,它可以工作。
我的 .datepicker 如何在我的 Jquery 中工作?这是示例 jsfiddle。http://jsfiddle.net/fqjvLxn1/14/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( ".datepicker" ).datepicker();
$("#btn1").click(function(){
$("p").append("<input type='text' class='asd datepicker'>");
});
} );
</script>
</head>
<body>
<button id="btn1">Append text</button>
<p>(.datepicker wont work here when I clicked a Button) </p>
<input type='text' class='asd2 datepicker'>(But works here)
</body>
</html>
解决方案
您应该再次调用 datepicker 函数。因为您在准备好文档时调用了一次。该片段在页面加载后立即执行。因此,您的动态日期选择器还不存在。您需要在每个新插入的元素上调用 $(YourElementSelector).datepicker()
$( function() {
$( ".datepicker" ).datepicker();
$("#btn1").click(function(){
$("p").append("<input type='text' class='asd datepicker'>");
$( ".datepicker" ).datepicker();
});
} );
推荐阅读
- wordpress - 使用 wordpress 为自由职业者网站创建后期项目功能
- python - CSV 文件的文件名不能使用 Python 变量
- python - 将嵌套的 JSON streamind 数据转换为 ndjson
- python - 需要去掉单引号
- python - 绘制半径为 R 的球体
- javascript - 如何使用函数 true 在 jquery 步骤中验证隐藏的空字段
- android - SHA-1 问题的 Android Studio v4.1 签名报告
- node.js - 在 Selenium Grid 4 alpha 6 中访问 chrome 驱动程序开发工具,
- html - 我如何将图像作为背景放在 reatcjs 上的多个组件下
- javascript - 函数没有改变外部变量