Question

我尝试在按钮单击时动态添加datepicker，并且已将datepicker单击委托给第一次单击时不起作用的日期选择器单击，而我尝试的代码如下

$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

最后，我找到了原因，并为之解决。我正在提供该解决方案，因为它可能会在将来对其他人有所帮助

原因：

第一个错误是我已将datepicker事件绑定到元素单击，因此绑定在第一次单击时发生，并且在随后的单击中开始起作用。

变通

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

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

    }

Answer 2

如果您只是试图使日期选择器出现在单击上，请使用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，并显示日期选择器。您还可以添加一个按钮来“隐藏”日期选择器：

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

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

AngularJS + jQuery bootstrap-datepicker委托在第一次单击时不触发

2 个答案: