代码之家 › 专栏 › 技术社区 › Thirumalai murugan JJacquelin

AngularJS+jQuery引导日期选取器委托未在第一次单击时激发

jquery-delegate bootstrap-datepicker angularjs jquery

0

Thirumalai murugan JJacquelin · 技术社区 · 8 年前

我已经尝试在按钮单击时动态添加日期选取器,并且我已经委派了日期选取器单击,它在第一次单击时不起作用。第二次单击时它将被激发。我尝试的代码如下

$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

复制Bug的步骤:

点击 Add Datepicker 按钮
日期选取器组件将添加到DOM中,然后单击日期选取器中的

观察

第一次单击不起作用,它将从随后的单击起作用。

2 回复 | 直到 8 年前

1

0

Thirumalai murugan JJacquelin 8 年前

最后,我找到了原因,并为此而努力。我正在给出解决方案,因为它将来可能会对其他人有所帮助

原因:

第一个错误是我绑定了元素click上的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"});

    }

2

-1

Edgar Quintero 8 年前

如果您只是想让日期选取器在单击时显示,则按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 发生在同一个函数中。