blocks|key|364540|text|在动态创建其他textbox元素之后，需要再次运行.datepicker();。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|364541|我建议在将元素添加到DOM的调用的回调方法中这样做。|364542|假设您正在使用JQuery+Load方法从源中提取元素并将其加载到DOM中，您将执行以下操作：|364543|$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox',+function()+{
++$(".datepicker_recurring_start"+).datepicker();
});|code-block|syntax|javascript|364544|entityMap^0|P|E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|U|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|V|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

You need to run the <code>.datepicker();</code> again after you've dynamically created the other textbox elements. 

I would recommend doing so in the callback method of the call that is adding the elements to the DOM.

So lets say you're using the JQuery Load method to pull the elements from a source and load them into the DOM, you would do something like this:

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

blocks|key|364616|text|诀窍是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364617|$('body').on('focus',".datepicker_recurring_start",+function(){
++++$(this).datepicker();
});​|code-block|syntax|javascript|364618|DEMO|offset|length|364619|$('...selector..').on('..event..',+'...another-selector...',+...callback...);语法表示：|style|CODE|364620|为事件焦点(在我们的例子中是‘body’)添加一个监听器到...selector..+(在我们的例子中是body)。对于匹配选择器...another-selector...+(在我们的示例中为.datepicker_recurring_start)的匹配节点的所有后代，应用事件处理程序...callback...+(在我们的示例中为内联函数)|364621|请参阅http://api.jquery.com/on/，特别是关于“委托事件”的部分|364622|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/SJ7bJ/98/|1|http://api.jquery.com/on/^0|0|0|0|4|0|0|0|25|0|F|4|T|D|1G|4|1T|M|2P|R|40|E|0|3|P|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@$I|15|J|16|1|17]]|A|$]]|$1|K|3|L|5|6|7|18|8|@$I|19|J|1A|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@$I|1C|J|1D|M|N]|$I|1E|J|1F|M|N]|$I|1G|J|1H|M|N]|$I|1I|J|1J|M|N]|$I|1K|J|1L|M|N]|$I|1M|J|1N|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1O|8|@]|9|@$I|1P|J|1Q|1|1R]]|A|$]]|$1|S|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

here is the trick:

<pre><code>$('body').on('focus',".datepicker_recurring_start", function(){
 $(this).datepicker();
});​
</code></pre>

<a href="http://jsfiddle.net/SJ7bJ/98/" rel="noreferrer">DEMO</a>

The <code>$('...selector..').on('..event..', '...another-selector...', ...callback...);</code> syntax means: 
Add a listener to <code>...selector..</code> (the <code>body</code> in our example) for the event <code>..event..</code> ('focus' in our example). For all the descendants of the matching nodes that matches the selector <code>...another-selector...</code> (<code>.datepicker_recurring_start</code> in our example) , apply the event handler <code>...callback...</code> (the inline function in our example)

See <a href="http://api.jquery.com/on/" rel="noreferrer">http://api.jquery.com/on/</a> and especially the section about "delegated events"

blocks|key|580521|text|对于下面的我来说，jquery起作用了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|580522|将"body“更改为”document“|580523|$(document).on('focus',".datepicker_recurring_start",+function(){
++++$(this).datepicker();
});|code-block|syntax|javascript|580524|感谢skafandri+|offset|length|580525|注意:请确保每个字段的id不同|580526|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1308134/skafandri^0|0|0|0|2|A|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

For me below jquery worked:

changing "body" to document

<pre><code>$(document).on('focus',".datepicker_recurring_start", function(){
 $(this).datepicker();
});
</code></pre>

Thanks to <a href="https://stackoverflow.com/users/1308134/skafandri">skafandri </a>

Note: make sure your id is different for each field

blocks|key|364699|text|skafandri+%2B1的出色回答|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364700|这只是为了检查hasDatepicker类而更新的。|364701|$('body').on('focus',".datepicker",+function(){

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

});|code-block|syntax|javascript|364702|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Excellent answer by skafandri +1

This is just updated to check for hasDatepicker class.

<pre><code>$('body').on('focus',".datepicker", function(){

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

});
</code></pre>

blocks|key|364742|text|其他的解决方案对我都不起作用。在我的应用程序中，我使用jquery将日期范围元素添加到文档中，然后对它们应用datepicker。因此，由于某种原因，所有的事件解决方案都不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364743|这就是最终有效的方法：|364744|$(document).on('changeDate',"#elementid",+function(){
++++alert('event+fired');
});|code-block|syntax|javascript|364745|希望这对某些人有帮助，因为这让我有点后退。|364746|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

None of the other solutions worked for me. In my app, I'm adding the date range elements to the document using jquery and then applying datepicker to them. So none of the event solutions worked for some reason.

This is what finally worked:

<pre><code>$(document).on('changeDate',"#elementid", function(){
 alert('event fired');
});
</code></pre>

Hope this helps someone because this set me back a bit.

blocks|key|580658|text|动态元素的新方法是MutationsObserver。以下示例使用underscore.js使用(+_.each+)函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|580659|MutationObserver+=+window.MutationObserver+%7C%7C+window.WebKitMutationObserver+%7C%7C+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
});|code-block|syntax|javascript|580660|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver|1|http://underscorejs.org/^0|9|H|0|X|D|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

The new method for dynamic elements is <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow">MutationsObserver</a> .. The following example uses <a href="http://underscorejs.org/" rel="nofollow">underscore.js</a> to use ( _.each ) function.

<pre><code>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
});
</code></pre>

blocks|key|580695|text|确保具有.date-picker类的元素还没有hasDatepicker类。如果是这样的话，即使尝试使用$myDatepicker.datepicker();重新初始化也会失败！相反你需要做的是..。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|580696|$myDatepicker.removeClass('hasDatepicker').datepicker();|code-block|syntax|javascript|580697|entityMap^0|4|C|N|D|1G|R|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

Make sure your element with the <code>.date-picker</code> class does NOT already have a <code>hasDatepicker</code> class. If it does, even an attempt to re-initialize with <code>$myDatepicker.datepicker();</code> will fail! Instead you need to do...

<pre><code>$myDatepicker.removeClass('hasDatepicker').datepicker();
</code></pre>

blocks|key|580738|text|您可以在javascript函数中添加类.datepicker，以便能够动态更改输入类型|type|unstyled|depth|inlineStyleRanges|entityRanges|data|580739|+$("#ddlDefault").addClass("datepicker");
+$(".datepicker").datetimepicker({+timepicker:+false,+format:+'d/m/Y',+});|code-block|syntax|javascript|580740|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can add the class .datepicker in a javascript function, to be able to dynamically change the input type

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

blocks|key|580808|text|我已经修改了@skafandri+answer，以避免对.datepicker_recurring_start类的所有输入重新应用datepicker构造函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|580809|下面是HTML：|580810|<div+id="content"></div>
<button+id="cmd">add+a+datepicker</button>|code-block|syntax|javascript|580811|下面是JS：|580812|$('#cmd').click(function()+{
++var+new_datepicker+=+$('<input+type="text">').datepicker();
++$('#content').append(' a+datepicker+').append(new_datepicker);
});|580813|这是一个working+demo|580814|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/cjdp/5Lpxnrh9/^0|S|R|1T|A|0|0|0|0|0|4|C|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

I have modified @skafandri answer to avoid re-apply the <code>datepicker</code> constructor to all inputs with <code>.datepicker_recurring_start</code> class.

Here's the HTML:

<pre><code>&lt;div id="content"&gt;&lt;/div&gt;
&lt;button id="cmd"&gt;add a datepicker&lt;/button&gt;
</code></pre>

Here's the JS:

<pre><code>$('#cmd').click(function() {
 var new_datepicker = $('&lt;input type="text"&gt;').datepicker();
 $('#content').append('&lt;br&gt;a datepicker ').append(new_datepicker);
});
</code></pre>

here's a <a href="http://jsfiddle.net/cjdp/5Lpxnrh9/" rel="nofollow noreferrer">working demo</a>

blocks|key|365018|text|这就是我在JQuery+1.3上的工作原理，并在第一次单击/聚焦时显示出来|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365019|function+vincularDatePickers()+{
++++$('.mostrar_calendario').live('click',+function+()+{
++++++++$(this).datepicker({+showButtonPanel:+true,+changeMonth:+true,+changeYear:+true,+showOn:+'focus'+}).focus();
++++});
}|code-block|syntax|javascript|365020|这需要您的输入具有'mostrar_calendario‘类|365021|Live适用于JQuery+1.3%2B对于较新的版本，您需要将其调整为"on“|365022|请在此处查看有关差异的更多信息http://api.jquery.com/live/|offset|length|365023|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/live/^0|0|0|0|0|F|R|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

This is what worked for me on JQuery 1.3 and is showing on the first click/focus

<pre><code>function vincularDatePickers() {
 $('.mostrar_calendario').live('click', function () {
 $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
 });
}
</code></pre>

this needs that your input have the class 'mostrar_calendario'

Live is for JQuery 1.3+ for newer versions you need to adapt this to "on"

See more about the difference here <a href="http://api.jquery.com/live/" rel="nofollow noreferrer">http://api.jquery.com/live/</a>

blocks|key|580872|text|$(+".datepicker_recurring_start"+).each(function(){
++++$(this).datepicker({
++++++++dateFormat:"dd/mm/yy",
++++++++yearRange:+'2000:2012',
++++++++changeYear:+true,
++++++++changeMonth:+true
++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|580873|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$( ".datepicker_recurring_start" ).each(function(){
 $(this).datepicker({
 dateFormat:"dd/mm/yy",
 yearRange: '2000:2012',
 changeYear: true,
 changeMonth: true
 });
});
</code></pre>

blocks|key|580903|text|这就是我的工作(使用jquery+datepicker)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|580904|$('body').on('focus',+'.datepicker',+function()+{
+$(this).removeClass('hasDatepicker').datepicker();
});|code-block|syntax|javascript|580905|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This was what worked for me (using jquery datepicker):

<pre><code>$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});
</code></pre>

blocks|key|580920|text|+$('body').on('focus',".my_date_picker",+function(){
++++++++++++$(this).datepicker({
++++++++++++++++minDate:+new+Date(),
++++++++++++});
++++++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|580921|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> $('body').on('focus',&quot;.my_date_picker&quot;, function(){
 $(this).datepicker({
 minDate: new Date(),
 });
 });
</code></pre>

I have dynamically created textboxes, and I want each of them to be able to display a calendar on click. The code I am using is:

<pre><code>$(".datepicker_recurring_start" ).datepicker();
</code></pre>

Which will only work on the first textbox, even though all my textboxes have a class called datepicker_recurring_start.

Your help is much appreciated!

putting datepicker() on dynamically created elements - JQuery/JQueryUI

我已经动态创建了文本框，并且我希望它们中的每一个都能够在单击时显示日历。我使用的代码是：$(".datepicker_recurring_start" ).datepicker();它只适用于第一个文本框，即使我所有的文本框都有一个名为datepicker_recurring_start的类。非常感谢您的帮助！

问将datepicker()放在动态创建的元素上- JQuery/JQueryUI
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将datepicker()放在动态创建的元素上- JQuery/JQueryUIEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将datepicker()放在动态创建的元素上- JQuery/JQueryUI
EN