jQuery Datepicker在动态元素中不起作用 [英] jQuery Datepicker does not work in dynamic element

问题描述

我有一个问题。 jQuery Datepicker不能以动态形式工作，因此您无法选择日期。以下是我的演示链接： http://gestionale.odoyabooks.com/sum.php 。

JavaScript：

 < script> 
 $（document）.ready（function（）{
 $（'。input_date'）。on（'click'，function（）{
 $（this）.datepicker（' '）.datepicker（{showOn：'focus'}）。focus（）; 
}）; 
}）; 
< / script> 
  

HTML：

 code>< form action =method =POST> 
 
< div class =yes> 
< div id =cost1class =clonedCoststyle =display：inline;> 
< table border =0> 
< tr> 
< td>< label class =datefor =date> Date< / label>< / td> 
< / tr> 
< tr> 
< td>< input class =input_dateid =datetype =textname =date []/>< / td> 
< / tr> 
< / table> 
< / div> 
< div id =addDelButtons_cost>< input type =buttonid =btnAddvalue => < input type =buttonid =btnDelvalue =>< / div> 
< / div> 
 
< / form> 
  

解决方案

问题是当您最初绑定事件时，新的字段不存在。

通过使用选择器 .input_date ，它应该以动态形式将事件附加到新元素。

  $（function（）{
 $ （'body'）。on（'click'，'。input_date'，function（）{
 $（this）.datepicker（'destroy'）。datepicker（{showOn：'focus'}）focus ）; 
}）; 
}）; 
  

工作实例

---

更好的方法：

您应该在创建元素时初始化字段的日期戳。

  $ function（）{
 $（'。input_date'）。datepicker（）; 
}）; 
 
函数createNewDatepickerInput（）{
 var $ newInput = $（'< input type =textname =date123class =input_date/>'）; 
 $ newInput.appendTo（form）。datepicker（）; 
} 
  

工作实例

I have a problem. jQuery Datepicker does not work in a dynamic form, so you can't pick a date. Here is my demo link http://gestionale.odoyabooks.com/sum.php.

JavaScript:

<script>
$(document).ready(function() {
    $('.input_date').on('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
        });
});
</script>

HTML:

<form action="" method="POST">

<div class="yes">
    <div id="cost1" class="clonedCost" style="display: inline;">
        <table  border="0">
          <tr>          
            <td><label class="date" for="date">Date</label></td>
          </tr>
          <tr>
            <td><input class="input_date" id="date" type="text" name="date[]" /></td>
          </tr>
        </table>
    </div>
    <div id="addDelButtons_cost"><input type="button" id="btnAdd" value=""> <input type="button" id="btnDel" value=""></div>
</div>

</form>

解决方案

The problem is that when you bind the event initially, the new field doesn't exist.

By applying the on click to the body, with the selector .input_date, it should attach the event to the new element in the dynamic form.

$(function() {
    $('body').on('click','.input_date', function() {
        $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
    });
});

Working Example

---

A better way:

You should initialize the datepicker for the field when you create the element.

$(function() {
    $('.input_date').datepicker();
});

function createNewDatepickerInput() {
    var $newInput = $('<input type="text" name="date123" class="input_date" />');
    $newInput.appendTo("form").datepicker();
}

Working Example

这篇关于jQuery Datepicker在动态元素中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！