Question

函数不会附加新创建的输入框。请检查此链接上的代码

[请检查此代码] [1]

$("#datepicker").datepicker();


$("button").click(function(){
  
  $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />');
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='add'><input id="datepicker" placeholder="click here to open calendar " type="text" /></div>
<button>Add input again </button>

depen.io/anon/pen/adLzi

Answer 1

当您点击按钮时，这是正在执行的代码：

$("button").click(function(){
    $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text"   />');
});

这样做是用一个新的替换datepicker。没有错，除了附加的事件重新附加它有问题。

TL：DR，请使用以下代码：

$("button").click(function(){
   var el = $('#datepicker');
  $.datepicker._clearDate(el);
});

修改

即使我不知道发生这种情况的确切原因，但这可能是因为在内部，jquery UI没有前一个DOM元素的链接，而是悬空。这也会导致内存泄漏。

Answer 2

$("button").click(function(){

   $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />');

   // move to here your cod
   $("#datepicker").datepicker();

});

$（“。add”）。html（...）表示删除并创建新的DOM对象

然后失去了意义$（“＃datepicker”）。datepicker（）;

Answer 3

试试这个

$("button").click(function(){
  $("#datepicker").val("");
  $("#datepicker").focus();
});

<强> Demo

Answer 4

尝试将插件init移动到document.ready函数中：

$(document).ready(function() {
$("#datepicker").datepicker();`
});

＆＃13;

$("button").click(function(){
  
  $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />');
  

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='add'><input id="datepicker" placeholder="click here to open calendar " type="text" /></div>
<button>Add input again </button>

＆＃13;

动态DOM创建问题

4 个答案: