触发事件点击页面加载

Question

I do not know why I can not trigger a click event on my controller upon page load. 我不知道为什么页面加载后无法在控制器上触发click事件。 What I want is the checkboxed to be click literally. 我想要的是要从字面上单击的复选框。

<!DOCTYPE html>
<html >

  <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  </head>

  <body ng-app="ngToggle">
    <div ng-controller="AppCtrl">
        <input type="checkbox" ng-model="dean" ng-click="btnChange($event, values, 1)" id="one" name="one" class="here" >
        <input type="checkbox"  ng-model="armada" ng-click="btnChange($event, values, 2)" id="two" name="one" class="here" >
        <!--<p ng-repeat="btn in btns">-->
        <!--  <input type="checkbox" ng-model="btn.bool" class="here" > {{ btn.value }}-->
        <!--</p>-->
        {{btn  }}
        {{values  }}
    </div>
    <script type="text/javascript">
        angular.module('ngToggle', [])
            .controller('AppCtrl',['$scope', function($scope){
            $scope.btns = [{}, {}, {}];
            $scope.values = [];
            $scope.btnChange = function(event, model, val){
              _this = angular.element(event.target);
              x = _this.prop("checked");
              if(x){
                model.push(val);
              }else{
                index = model.indexOf(val);
                model.splice(index, 1);
              }
            };
            angular.element("#one").triggerHandler("click");
        }]);
    </script>
  </body>
</html>

Here is the plunker: http://plnkr.co/edit/7DpCvkKLlKhRc3YwFTq0?p=preview 这是the人： http ://plnkr.co/edit/7DpCvkKLlKhRc3YwFTq0?p=preview

Answer 1

You can place it on controller like this 您可以像这样将其放置在控制器上

 angular.element(document).ready(function() {
          angular.element("#one").trigger("click"); 

        });

Here is the Plunker 这是柱塞

Answer 2

I see that you have used jQuery on the page. 我看到您在页面上使用了jQuery。 So you can simply do this : 因此，您只需执行以下操作：

 $(function(){
     angular.element("#one").trigger("click"); 
 });

A complete jQuery solution would be : 完整的jQuery解决方案是：

 $(function(){
    $("#one").click(); 
 });

A complete angular solution would be (like others mentioned) : 一个完整的角度解决方案将是（就像其他提到的一样）：

angular.element(document).ready(function() {
    angular.element("#one").trigger("click"); 
});

http://plnkr.co/edit/0OHDIVB2JGqDZnF56E6M?p=preview http://plnkr.co/edit/0OHDIVB2JGqDZnF56E6M?p=preview

You are triggering the code to click when the document is not completely ready/rendered so you need to wait till the entire document(or in this case, your checkbox) is loaded and only then you can perform actions on your elements. 当文档尚未完全就绪/渲染时，您将触发代码单击，因此您需要等到整个文档（或本例中的复选框）被加载，然后才可以对元素执行操作。

Answer 3

You just need to add a small timeout to trigger a click 您只需要添加一个小的超时即可触发点击

$timeout(function() {
          angular.element('#one').click();
        }, 100);

I have updated your plunker link check it out Plunker 我已经更新了您的矮人链接，请查看Plunker

Or You can do 或者你可以做

angular.element(document).ready(function() {
          angular.element("#one").trigger("click"); 
        });

触发事件点击页面加载

问题描述

3 个解决方案

解决方案1
2 2016-06-27 10:11:54

解决方案2
2 已采纳 2016-06-27 10:14:34

解决方案3
1 2016-06-27 10:11:41

触发事件点击页面加载

问题描述

3 个解决方案

解决方案1 2 2016-06-27 10:11:54

解决方案2 2 已采纳 2016-06-27 10:14:34

解决方案3 1 2016-06-27 10:11:41

解决方案1
2 2016-06-27 10:11:54

解决方案2
2 已采纳 2016-06-27 10:14:34

解决方案3
1 2016-06-27 10:11:41