동적으로 텍스트 상자를 만들었으며 각 텍스트 상자가 클릭시 달력을 표시 할 수 있기를 원합니다. 내가 사용하는 코드는 다음과 같습니다.
$(".datepicker_recurring_start" ).datepicker();
모든 텍스트 상자에 datepicker_recurring_start라는 클래스가 있더라도 첫 번째 텍스트 상자에서만 작동합니다.
귀하의 도움에 감사드립니다!
동적으로 텍스트 상자를 만들었으며 각 텍스트 상자가 클릭시 달력을 표시 할 수 있기를 원합니다. 내가 사용하는 코드는 다음과 같습니다.
$(".datepicker_recurring_start" ).datepicker();
모든 텍스트 상자에 datepicker_recurring_start라는 클래스가 있더라도 첫 번째 텍스트 상자에서만 작동합니다.
귀하의 도움에 감사드립니다!
답변:
여기에 트릭이 있습니다.
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
$('...selector..').on('..event..', '...another-selector...', ...callback...);
구문 수단은 :
에 리스너를 추가 ...selector..
합니다 ( body
이벤트에 대한 우리의 예에서) ..event..
(우리의 예에서 '초점'). 선택기와 일치하는 일치하는 노드의 모든 자손에 대해 ...another-selector...
( .datepicker_recurring_start
이 예에서는) 이벤트 핸들러 ...callback...
(이 예에서는 인라인 함수 )를 적용합니다.
http://api.jquery.com/on/ 및 특히 "위임 된 이벤트"에 대한 섹션을 참조하십시오.
.datapicker()
텍스트 상자에 초점이 맞춰질 때마다 전화를 걸고 싶은 것이 이상해 보이지만 이 접근 방식에주의해야합니다 (이 내용을 올바르게 읽고 있다고 가정). 그러나 .datapicker()
재생성을 시도하기 전에 datepicker가 생성되었는지 확인하기 때문에 괜찮을 것이라고 생각합니다 . 다른 코드를 사용하면 이러한 은혜가 없을 수 있습니다. 또한 .on (은 JQuery 1.7에서만 도입되었으므로 올바른 버전을 사용하고 있는지 확인하십시오.
:not(.hasDatepicker)
나를 위해 jquery가 작동했습니다.
"본문"을 문서로 변경
$(document).on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
skafandri 덕분에
참고 : 각 필드마다 ID가 다른지 확인하십시오.
skafandri의 우수한 답변 +1
hasDatepicker 클래스를 확인하기 위해 업데이트되었습니다.
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});
$('body').on('focus',".datepicker:not(.hasDatepicker)", function(){$(this).datepicker();});
있습니까?
.date-picker
클래스가 있는 요소에 아직 클래스가 없는지 확인하십시오 hasDatepicker
. 그럴 경우로 다시 초기화하려는 시도도 $myDatepicker.datepicker();
실패합니다! 대신해야 할 일 ...
$myDatepicker.removeClass('hasDatepicker').datepicker();
.datepicker();
다른 텍스트 상자 요소를 동적으로 만든 후에를 다시 실행해야합니다 .
DOM에 요소를 추가하는 호출의 콜백 메서드에서 그렇게하는 것이 좋습니다.
따라서 JQuery Load 메서드를 사용하여 소스에서 요소를 가져 와서 DOM으로로드한다고 가정하면 다음과 같이 할 수 있습니다.
$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
$(".datepicker_recurring_start" ).datepicker();
});
동적 요소의 새로운 메소드는 MutationsObserver입니다 . 다음 예제에서는 underscore.js 를 사용하여 (_.each) 함수를 사용합니다.
MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {
_.each(repeaterWrapper, function (repeaterItem, index) {
var jq_nodes = $(repeaterItem.addedNodes);
jq_nodes.each(function () {
// Date Picker
$(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
dateFormat: "dd MM, yy",
showAnim: "slideDown",
changeMonth: true,
numberOfMonths: 1
});
});
});
});
observerjQueryPlugins.observe(document, {
childList: true,
subtree: true,
attributes: false,
characterData: false
});
이것은 나를 위해 일한 것입니다 (jquery datepicker 사용).
$('body').on('focus', '.datepicker', function() {
$(this).removeClass('hasDatepicker').datepicker();
});
javascript 함수에 .datepicker 클래스를 추가하여 입력 유형을 동적으로 변경할 수 있습니다.
$("#ddlDefault").addClass("datepicker");
$(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
클래스 datepicker
가있는 모든 입력에 생성자를 다시 적용하지 않도록 @skafandri 답변을 수정했습니다 .datepicker_recurring_start
.
HTML은 다음과 같습니다.
<div id="content"></div>
<button id="cmd">add a datepicker</button>
다음은 JS입니다.
$('#cmd').click(function() {
var new_datepicker = $('<input type="text">').datepicker();
$('#content').append('<br>a datepicker ').append(new_datepicker);
});
다음은 작동하는 데모입니다.
이것은 JQuery 1.3에서 저에게 효과적이며 첫 번째 클릭 / 포커스에서 표시됩니다.
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
입력에 'mostrar_calendario'클래스가 있어야합니다.
Live는 JQuery 1.3+ 용으로 "on"으로 조정해야하는 최신 버전 용입니다.
차이점에 대한 자세한 내용은 http://api.jquery.com/live/를 참조 하십시오.
$( ".datepicker_recurring_start" ).each(function(){
$(this).datepicker({
dateFormat:"dd/mm/yy",
yearRange: '2000:2012',
changeYear: true,
changeMonth: true
});
});