javascript - 动态 DOM 创建问题

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"   />');
});

这样做的目的是用一个新的日期选择器替换日期选择器。没有错，只是附加的事件在重新附加它时出现问题。

TL:DR，使用这段代码:

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

编辑

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