javascript - Trigger Event Click upon page load

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

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 Armada 7,38410 gold badges75 silver badges133 bronze badges

Add a ment |

3 Answers 3

Sorted by: 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"); 
        });

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Trigger Event Click upon page load - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)