Angularjs+；jquery引导数据采集器委托在第一次单击时未触发_Jquery_Angularjs_Bootstrap Datepicker_Jquery Delegate

Angularjs+；jquery引导数据采集器委托在第一次单击时未触发

jquery angularjs

Angularjs+；jquery引导数据采集器委托在第一次单击时未触发,jquery,angularjs,bootstrap-datepicker,jquery-delegate,Jquery,Angularjs,Bootstrap Datepicker,Jquery Delegate,我尝试在按钮单击时动态添加datepicker，并委托datepicker单击，第一次单击时它不起作用，第二次单击时它被触发。我尝试的代码如下 $scope.add = function() { var body =angular.element(window.document.body); body.append(` <div class="input-group date"> <input class="f

我尝试在按钮单击时动态添加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"});       
});

$scope.add=function（）
{
var body=angular.element（window.document.body）；
body.append(`
`);
}
$（document）.delegate（“div.input-group.date”，“click”，function（）{
$（this.datepicker（{autoclose:true，方向：“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>

复制错误的步骤：

单击添加日期选择器按钮

日期选择器组件将添加到DOM中，然后在日期选择器中单击

观察

首先单击不起作用，如果您只是想让日期选择器在单击时出现，那么它将在随后的单击中起作用，然后按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>

模板：

$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

和

remove

发生在同一个函数中。

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

原因：

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

第一个错误是我在元素单击时绑定了datepicker事件，所以绑定发生在第一次单击时，并在随后的单击中开始工作

解决问题

我们必须在创建元素后立即绑定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"});

    }

$scope.add=function（）
{
var body=angular.element（window.document.body）；
变量元素=角度。元素（'\
\
\
\
\
');
body.append（元素）；
$（元素）.datepicker（{autoclose:true，方向：“top”}）；
}

为什么要犯混合angularJS和jquery的严重错误。为什么不使用角度日期选择器？？使用时缺少

$digest

jquery@ShashankVivekjQuery代码没有修改

$scope

，因此在这种情况下，缺少

$digest

或

$apply

不是问题。您可能不需要混合使用jQuery，你能对你想要达到的目标做更多的评论吗？这段代码使用了旧版本的引导数据采集器（1.5）和旧版本的jQuery（1.11）。与其尝试解决jQuery委托（已弃用）的问题，不如使用与AngularJS框架集成的引导数据采集器。想想AngularUI团队中的一个：@好啊让我检查一下，然后这个答案显示了一个材料设计日期选择器，但问题是关于一个引导日期选择器。更新的答案使用bootstrap@EdgarQuintero谢谢你的帮助，我想动态地（n次）而不是静态地添加组件。好的，我在你最初的问题中没有看到（n次）部分。另外，我在你的问题中没有看到你提到不能从控制器操纵DOM，如果这是一个要求的话，应该发布它。