CODEWITHSUNDEEP
jqueryangularjs
devuser7
devuser7

Reputation: 35

How do I avoid clicking the button twice in order to fire an event in jquery

When I click a button once,I'm unable to fire an event.Double clicking of a button is making my event to fire.

I've used angular js and jQuery over here.I'm not getting,where I'm going wrong.Can any one please help me out regarding this issue ...

My js code:

   var app = angular
            .module('Home', [ 'ngAnimate', 'ui.bootstrap', 'ngRoute' ]);
    app.config([ '$routeProvider', function($routeProvider) {
        $routeProvider.when('/basic', {
            controller : 'Sample',
            templateUrl : 'html/basic.html'
        }).when('/features', {
            controller : 'Sample',
            templateUrl : 'html/basic.html'
        })
    } ]);
    app.controller('Sample', function($scope) {

        $scope.getFilenameFromPath = function(filename) {
                return filename.split("/")[1].split(".")[0];
        }

            $('#hideDiv').click(function() {
                    $('#diva').hide();
            })

    });

My html code:

<a  href="#/basic"><button id="hideDiv" style="margin-left: 22px; background-color: #73AD21">Basic</button></a>

<a href="#/features"><button id="showDiv" style="margin-left: 22px; background-color: #73AD21">+Features</button></a>



    <div id="diva" class="subdiv">
     <div style="margin-top: 15px; display: inline-block"
                ng-repeat="advanceimage in advanceimages">
      <img width=40 height=50 style="margin-left: 12px;" ng-src="{{advanceimage}}" /> 
      <br>
      <span style="margin-left: 12px;">{{getFilenameFromPath(advanceimage)}}</span>
     </div>
    </div>

Upvotes: 1

Views: 652

Answers (2)

Krzysztof Safjanowski
Krzysztof Safjanowski

Reputation: 7438

Try to investigate debounce or throttle technic - http://underscorejs.org/#debounce or http://underscorejs.org/#throttle .

Throttle - Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with.

Upvotes: 2

RiesvGeffen
RiesvGeffen

Reputation: 1589

Here is an example of how to use ngHide:

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.hideDiva = false;
  $scope.toggle = function() {
    $scope.hideDiva = !$scope.hideDiva;
  };
});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <button ng-click="toggle()">Hide/show</button>
  <div>
    <img ng-hide="hideDiva" src="http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg">
  </div>
</body>

</html>

If you have any questions about it just let me know.

Upvotes: 1

Related Questions