“appendsTO”使内部功能不起作用的Jquery / JS

Question

基本上每次我点击.addScntbutton时，它都会在.p_scentsdiv的页面上添加一个form，但如果date picker rangeinput无法工作，则form通过按钮添加。 如果我通过将代码复制粘贴到 html 文件中将他放入页面中，它就可以正常工作。

这是我的功能：

$(function() {
    var scntDiv = $('.p_scents');
    $('.addScnt').on('click', function() {
    $('/* removed long strip of code for easier reading */').appendTo(scntDiv); 
        return false;
    });
});

通过阅读互联网，我发现了一些关于“直接和委托事件”的信息，但我仍然无法弄清楚我做错了什么。

编辑试图澄清：

这行得通。

HTML：

<div class="form-group">
                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="date-range-picker">Start/End Date:</label>
                    <div class="col-xs-12 col-sm-9">
                      <div class="clearfix">
                        <input class="col-xs-12 col-sm-4 date-range-picker" type="text" name="date-range-picker" />
                      </div>
                    </div>
  </div>

Jquery：

$('.date-range-picker').daterangepicker().prev().on(ace.click_event, function(){
          $(this).next().focus();
        });

但事实并非如此。

Jquery+HTML：

$(function() {
          var scntDiv = $('.p_scents');
          var i = $('.p_scents').size();
          $('.addScnt').on('click', function() {
            $(' <div class="form-group"> <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="date-range-picker">Start/End Date:</label> <div class="col-xs-12 col-sm-9"> <div class="clearfix"> <input class="col-xs-12 col-sm-4 date-range-picker" type="text" name="date-range-picker" /> </div> </div> </div>').appendTo(scntDiv); i++;
            return false;
          });
        });

Answer 1

每次添加到 DOM 时，都需要为这些特定节点设置新的事件处理程序。因此，在附加之后，为该日期选择器附加一个侦听器。更好；使用 $('.allMyFormsDiv').find('.datePicker').on('focus', openDatePicker) 之类的东西提前为所有日期选择器设置一个事件处理程序

如果这不能回答您的问题，请发布一个小提琴（/whatever）链接，如果它不能显示出了什么问题，那么它有点难以理解。