将datepicker（）放在动态创建的元素上--JQuery / JQueryUI [英] putting datepicker() on dynamically created elements - JQuery/JQueryUI

问题描述

我已经动态创建文本框，我希望每个文本框能够显示一个单击日历。我使用的代码是：

  $（。datepicker_recurring_start）.datepicker（）; 
  

即使我的所有文本框都有一个名为datepicker_recurring_start的类，它只能在第一个文本框上工作。 / p>

您的帮助非常感激！

解决方案

  $（'body'）。on（'focus'，。datepicker_recurring_start，function（）{
 $（this）.datepicker（）; 
}）; 
  

演示

$（' ...选择器..'）。on（'.. event ..'，'... another-selector ...'，... callback ...）; 语法意思是：

在我们的示例中添加一个监听器到 ... selector .. （正文对于事件 ..事件.. （在我们的示例中为'focus'）。对于与选择器匹配的匹配节点的所有后代 ... another-selector ... （ .datepicker_recurring_start 在我们的示例中），应用事件处理程序 ...回调... （在我们的示例中的内联函数）

请参见 http://api.jquery.com/on/ ，特别是有关委派的部分事件

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:

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

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!

解决方案

here is the trick:

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

DEMO

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

See http://api.jquery.com/on/ and especially the section about "delegated events"

这篇关于将datepicker（）放在动态创建的元素上--JQuery / JQueryUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！