Angularjs+jquery bootstrap-datepicker 委托未在第一次点击时触发

Question

我已经尝试在单击按钮时动态添加日期选择器，并且我已经委托了日期选择器点击，它在第一次点击时不起作用，它在第二次点击时被触发我试过的代码如下

$scope.add = function()
    {
      var body =angular.element(window.document.body);
      body.append(`
        <div class="input-group date">
          <input class="form-control input-sm" 
                 placeholder="dd/mm/yyyy"type="text">
          <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
          </span>
        </div>
      `);

    }

$(document).delegate("div.input-group.date", "click", function(){     
      $(this).datepicker({autoclose: true,orientation:"top"});       
});

找不到原因，先谢谢了。

<html ng-app="app">
  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src="jquery-1.11.3.js"></script>
    <!-- Datepicker for Bootstrap v1.5.0 (https://github.com/eternicode/bootstrap-datepicker) -->
    <script src="datetimepicker.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="test">
      <input ng-click="add()" value="Add datepicker" type="button" />
  </body>

</html>

plnkr sample

复制错误的步骤：

单击 Add Datepicker 按钮
日期选择器组件将添加到 DOM，然后单击日期选择器

观察到

第一次点击不起作用，从后续点击开始起作用

Answer 1

如果您只是想让日期选择器在点击时出现，请按 AngularJS 方式进行：

控制器：

$scope.add = function() {
  $scope.showDatePicker = true;
}

模板：

<button ng-click="add()">Add Datepicker</button>

<div ng-show="showDatePicker" class="input-group date">
   <input class="form-control input-sm" placeholder="dd/mm/yyyy"type="text">
   <span class="input-group-addon">
   <span class="fa fa-calendar"></span>
   </span>
</div>

当您单击带有 add() 的按钮时，$scope.showDatePicker 设置为 true 并显示日期选择器。您还可以向 "hide" 日期选择器添加一个按钮：

$scope.remove = function() {
  $scope.showDatePicker = false;
}

或者您可以创建一个函数来切换它，其中 add 和 remove 发生在同一个函数中。

Answer 2

我终于找到了原因并解决了同样的问题。我正在提供该解决方案，因为它可能会在将来帮助其他人

原因：

第一个错误是我在元素点击时绑定了日期选择器事件，所以绑定发生在第一次点击时，它开始在后续点击中起作用。

解决方法

我们必须在创建元素后立即绑定日期选择器我已经使用以下代码解决了这个问题

$scope.add = function()
    {
      var body =angular.element(window.document.body);
      var element=angular.element('<div class="input-group date">\
                      <input class="form-control input-sm"\
                      placeholder="dd/mm/yyyy" type="text">\
                      <span class="input-group-addon">\
                        <span class="fa fa-calendar"></span>\
                      </span>\
                  </div>');
      body.append(element);
      $(element).datepicker({autoclose: true,orientation:"top"});

    }

Angularjs+jquery bootstrap-datepicker 委托未在第一次点击时触发

Angularjs+jquery bootstrap-datepicker delegate not firing on first click

jquery

jquery-delegate

angularjs

bootstrap-datepicker