admin管理员组

文章数量:1387360

I do not know why I can not trigger a click event on my controller upon page load. What I want is the checkboxed to be click literally. 

<!DOCTYPE html>
<html >

  <head>
    <link rel="stylesheet" type="text/css" href=".1.1/css/bootstrap.min.css">
    <script src=".2.2/jquery.min.js"></script>
    <script src=".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:

I do not know why I can not trigger a click event on my controller upon page load. What I want is the checkboxed to be click literally. 

<!DOCTYPE html>
<html >

  <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn./bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis./ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis./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

  • javascript
  • angularjs
Share Improve this question edited Jun 27, 2016 at 10:09 Rob 15.2k30 gold badges48 silver badges73 bronze badges asked Jun 27, 2016 at 10:06 Dean Christian ArmadaDean Christian Armada 7,38410 gold badges75 silver badges133 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

I see that you have used jQuery on the page. So you can simply do this :

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

A plete jQuery solution would be :

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

A plete angular solution would be (like others mentioned) :

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

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

You are triggering the code to click when the document is not pletely 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.

You can place it on controller like this

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

        });

Here is the Plunker

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

Or You can do 

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

本文标签： javascriptTrigger Event Click upon page loadStack Overflow

版权声明：本文标题：javascript - Trigger Event Click upon page load - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744558158a2612603.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。