0

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

$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 样本

复制错误的步骤：

  1. 点击Add Datepicker按钮
  2. 将在 DOM 中添加日期选择器组件，然后单击日期选择器

观察到的

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

4

2 回答 2

0

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

原因：

第一个错误是我在元素单击时绑定了 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"});

    }
于 2018-07-02T10:57:38.160 回答
-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>

当您单击设置为 true 的按钮时，会显示日期选择器add()。$scope.showDatePicker您还可以添加一个按钮来“隐藏”日期选择器：

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

或者您可以创建一个功能来切换它，在同一功能中的位置add和发生位置。remove

于 2018-07-01T16:04:21.530 回答