동적으로 생성 된 요소에 datepicker () 넣기-JQuery / JQueryUI


115

동적으로 텍스트 상자를 만들었으며 각 텍스트 상자가 클릭시 달력을 표시 할 수 있기를 원합니다. 내가 사용하는 코드는 다음과 같습니다.

$(".datepicker_recurring_start" ).datepicker();

모든 텍스트 상자에 datepicker_recurring_start라는 클래스가 있더라도 첫 번째 텍스트 상자에서만 작동합니다.

귀하의 도움에 감사드립니다!


"동적으로 생성됨"이라는 말은 페이지가로드되기 전의 코드 숨김을 의미합니까? 아니면 페이지로드 후 자바 스크립트를 사용한다는 의미입니까? 페이지가로드 된 후에 요소가 추가되면 새 텍스트 상자가 추가 될 때마다 달력을 다시 바인딩해야하기 때문입니다.
DangerMonkey

PHP로 코드 숨김에로드하고 있습니다.
침지

나는 당신이 혼란스러워 할 것이라고 생각하지만 당신이 제공 한 정보로 말하기가 어렵습니다. 확인을 위해 '동적으로 생성 된 텍스트 상자'가 의미하는 바를 확인해 주시겠습니까?
Tr1stan

'페이지 1'을로드하는 경우 PHP는 db를보고 '페이지 1'에 날짜 텍스트 상자가 몇 개 있는지 확인하고 표시합니다. 따라서 '페이지 1'이로드되면 datepicker ()를로드해야하는 4 개의 텍스트 상자가 있습니다. 'page two'에는 datepicker () 함수를로드하는 데 필요한 7 개의 텍스트 상자가 있습니다.
침지

당신이 데이터 선택기는 첫 번째 호출 후 작동하지 않는 문제가있는 경우,이 답을 체크 아웃 : stackoverflow.com/a/16283547/1329910 귀하의 문제는 날짜 선택기 추가 자신의 클래스와 함께 할 수있다 : hasDatepicker
블라드

답변:


270

여기에 트릭이 있습니다.

$('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/ 및 특히 ​​"위임 된 이벤트"에 대한 섹션을 참조하십시오.


4
이것은 모든 종류의 동적 추가에서 작동하는 솔루션입니다. 당신에게 +1.
DangerMonkey

5
.datapicker()텍스트 상자에 초점이 맞춰질 때마다 전화를 걸고 싶은 것이 이상해 보이지만 이 접근 방식에주의해야합니다 (이 내용을 올바르게 읽고 있다고 가정). 그러나 .datapicker()재생성을 시도하기 전에 datepicker가 생성되었는지 확인하기 때문에 괜찮을 것이라고 생각합니다 . 다른 코드를 사용하면 이러한 은혜가 없을 수 있습니다. 또한 .on (은 JQuery 1.7에서만 도입되었으므로 올바른 버전을 사용하고 있는지 확인하십시오.
Tr1stan

3
datepicker는 jQuery 버전이 1.7 미만인 경우 이미 생성되었는지 여부 (모든 jQueryUI 구성 요소)를 확인할 수있을만큼 영리합니다. live
ilyes kooli

7
당신은 필터를 추가 할 수 있습니다:not(.hasDatepicker)
살만

1
datepicker가 포함 된 영역 내에서 jQuery.clone () 사용에주의하십시오. 그렇게한다면 이것을 추가하여 hasDatepicker 클래스를 제거하고 id datepicker가 입력에 추가합니다. .... find ( 'input.hasDatepicker'). removeClass ( 'hasDatepicker'). removeAttr ( 'id');
yahermann

44

나를 위해 jquery가 작동했습니다.

"본문"을 문서로 변경

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

skafandri 덕분에

참고 : 각 필드마다 ID가 다른지 확인하십시오.


맞습니다-저에게는 $ ( 'body')가 아닌 $ (document)를 사용해야합니다.-작은 코드 조각으로 문제가 발생합니다. 예제가 문제없이 작동하도록 할 수는 있지만 JavaScript를 바이올린에 추가하자마자이 코드는 더 이상 작동하지 않습니다. 그래도 둘 다 감사합니다.
Tom Stickel 2015

16

skafandri의 우수한 답변 +1

hasDatepicker 클래스를 확인하기 위해 업데이트되었습니다.

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

1
그런 다음 단축 할 수 $('body').on('focus',".datepicker:not(.hasDatepicker)", function(){$(this).datepicker();});있습니까?
누가 복음 스티븐슨

11

.date-picker클래스가 있는 요소에 아직 클래스가 없는지 확인하십시오 hasDatepicker. 그럴 경우로 다시 초기화하려는 시도도 $myDatepicker.datepicker();실패합니다! 대신해야 할 일 ...

$myDatepicker.removeClass('hasDatepicker').datepicker();

맞아요! 동적으로로드 된 요소는 나에게 문제가되지 않았으므로이 솔루션이 효과가있었습니다.
Sterling Beason

6

.datepicker();다른 텍스트 상자 요소를 동적으로 만든 후에를 다시 실행해야합니다 .

DOM에 요소를 추가하는 호출의 콜백 메서드에서 그렇게하는 것이 좋습니다.

따라서 JQuery Load 메서드를 사용하여 소스에서 요소를 가져 와서 DOM으로로드한다고 가정하면 다음과 같이 할 수 있습니다.

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});

1
이것은 내 경험에서 항상 실제로 작동하지 않습니다. 가장 좋은 경우는 요소에 고유 ID를 추가하고 해당 ID를 사용하여 참조하고 datepicker를 적용하는 것입니다. 내부적으로 플러그인은 이러한 선택기를 사용하는 것 같습니다.
Wes Johnson

1

동적 요소의 새로운 메소드는 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
});


0

다른 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. 내 앱에서 jquery를 사용하여 문서에 날짜 범위 요소를 추가 한 다음 datepicker를 적용합니다. 따라서 어떤 이유로 든 이벤트 솔루션이 작동하지 않았습니다.

이것이 마침내 효과가 있었던 것입니다.

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

이것이 나를 조금 뒤로 설정했기 때문에 누군가에게 도움이되기를 바랍니다.


0

javascript 함수에 .datepicker 클래스를 추가하여 입력 유형을 동적으로 변경할 수 있습니다.

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

0

클래스 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);
});

다음은 작동하는 데모입니다.


0

이것은 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/를 참조 하십시오.


0
$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.