Question

我正在这样使用daterangepicker：

$('#myInput').daterangepicker({
'param1': value1,
'param2': value2,
'param3': value3,
...
}, function(...) {
...
})

如果我的输入是使用DOM创建的，则此方法很好。但是，如果我的输入是在DOM之后动态创建的，则此操作不起作用，通常我应该执行以下操作：

$('body').on('daterangepicker..........event', '#myInput', function() {

})

但是我不知道该怎么做，谢谢您的帮助

Answer 1

只是因为您的DOM尚未创建。因此，您可以通过寄存器元素包装＃my-input

将其存档

这就是为什么您使用“ body”并且效果很好的原因。

您可以尝试以下示例

<div id="my-div"> <input id="my-input" /> </div>

$("#my-div").on('daterangepicker..........event', '#myInput', function() {

})

Answer 2

您需要制作一个容器并将其注入。

$(function() {
     let html = document.getElementById('container');
    setTimeout(() => {
     // Dynamically adding datepicker
      html.innerHTML = '<input type="text" id="datepicker"/>'; // 
      let dp = document.getElementById('datepicker'); 
      dp.classList.add('DatePicker');
      $('.DatePicker').datepicker();
    }, 500)
  });

<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>
<body>

  <div id="container"></div>
  
</body>
</html>

如何触发事件到动态创建的元素？

2 个答案: