반응형
동적으로 작성된 필드에서 JQuery Datepicker 사용
워드프레스 사이트에서 datepicker를 사용해야 하는데 플러그인이 동일한 이름(array), 동일한 #id 및 동일한 .class로 필드를 동적으로 만듭니다. 포커스를 사용하여 사용하려고 하지만 오류가 발생했습니다.
TypeError: inst is undefined
제발 도와주세요
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assests/jquery-ui.min.css" rel="stylesheet">
<script src="assests/jquery.js"></script>
<script src="assests/jquery-ui.js"></script>
</head>
<body>
<div class="mytemplate" style="display: none;">
<input id="datepicker" type="text" name="name[]">
</div>
<div class="dates">
<div>
<input id="datepicker" type="text" name="name[]">
</div>
</div>
<input type="button" value="Add more" onclick="myfunction()">
<script>
function myfunction() {
$(".mytemplate").clone().removeClass("mytemplate").show().appendTo(".dates");
}
</script>
<script>
$(document).on("focus", "#datepicker", function(){
$(this).datepicker();
});
</script>
</body>
</html>
당신은 가지고 있다id="datepicker"모든 datepicker 입력에 대해 ID는 특정 DOM에서 고유해야 합니다.class="datepicker"대신.그리고 어차피 jquery를 사용하고 있으니 바닐라 자바스크립트를 사용하지 않아도 됩니다.onclick기능.
데모: http://jsfiddle.net/swm53ran/331/
<div class="mytemplate" style="display: none;">
<input class="datepicker" type="text" name="name[]"/>
</div>
<div class="dates">
<div>
<input class="datepicker" type="text" name="name[]"/>
</div>
</div>
<input type="button" class="addmore" value="Add more">
$(document).ready(function() {
$('.addmore').on('click', function() {
$(".mytemplate").clone().removeClass("mytemplate").show().appendTo(".dates");
});
$(document).on("focus", ".datepicker", function(){
$(this).datepicker();
});
});
언급URL : https://stackoverflow.com/questions/32694306/use-jquery-datepicker-on-dynamically-created-fields
반응형
'programing' 카테고리의 다른 글
| 파이썬으로 경로 이름만 얻는 방법? (0) | 2023.10.10 |
|---|---|
| log2가 내 수학에서 발견되지않았습니까? (0) | 2023.10.10 |
| 텍스트 문자열을 $first와 $last name(php)으로 나눕니다. (0) | 2023.10.10 |
| 체크아웃 시 WooCommerce 문자 발송 변경 방법 (0) | 2023.10.10 |
| PowerShell에서 일반 정적 메서드 호출 (0) | 2023.10.10 |