logo
down
shadow

Click handler is called multiple times in jQuery animate


Click handler is called multiple times in jQuery animate

Content Index :

Click handler is called multiple times in jQuery animate
Tag : javascript , By : ap.
Date : November 29 2020, 09:01 AM

I hope this helps . The click handler is recursively called in the animation complete callback which is binding the click event on the element multiple times. So, when the element is clicked the handler is being called multiple times.
To solve the issue, bind the event only once.
function Animate() {
    var _newPosition = GetNewPosition();
    // Sets new position of div
    div.animate({
        top: _newPosition[0],
        left: _newPosition[1]
    }, Animate);
}
$(document).ready(function () {
    Animate();

    div.on('click', function() {
        // Code here
        alert('clicked');
    });
});
function() {
    Animate();
}
var div = $('#box');
$(document).ready(function() {
  Animate();

  div.on('mousedown', function() {
    // Code here
    console.log('clicked');
  });
});

function GetNewPosition() {
  // Get dimentions of the window and remove the div area
  var h = $(window).height() - 50;
  var w = $(window).width() - 50;
  // New height and width is auto generated
  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);
  return [nh, nw];
}

function Animate() {
  var _newPosition = GetNewPosition();
  // Sets new position of div
  div.animate({
    top: _newPosition[0],
    left: _newPosition[1]
  }, (Math.floor(Math.random() * 5000) + 1), Animate);
}
#box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="success"></h3>
<div id="box"></div>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Why does my jQuery click handler appear to run multiple times for some of its targets?


Tag : jquery , By : Frank Rotolo
Date : March 29 2020, 07:55 AM
it should still fix some issue Unable to replicate. I suspect that you're misrepresenting — oversimplifying, mostly — your situation. To be precise, I believe you're dynamically adding those inputs, and calling $(".newContentLink").click(...) each time — which, naturally, keeps applying additional copies of the click handler to each .newContentLink in the page.
So the most recent input you've created has one copy of the click handler and appends one 1. The second most recent has two copies and appends 11. The third has three and appends 111, etc.

jquery click handler called multiple times when used inside google Maps InfoBox but not infoWindow


Tag : jquery , By : chudq7
Date : March 29 2020, 07:55 AM
hope this fix your issue I am having a problem that I just cannot figure out. I took over an application that uses version 3 of the google maps API. I was not really familiar with it, but I was asked to adjust a few things. One of them entailed creating custom infoBubbles rather than using the default infoWindow's so that we could style them up nice. I found a class called infoBox that will do just this and followed some examples to get where I am now. However, my application requires that each overlay (polygon, polyline, or marker) have a delete button on the infoBox. The delete was working just fine with a jQuery click event when we were using the default infoWindow's but it is very peculiar now that I am using the infoBox instead. I have created a small test file that demonstrates the problem. The gist of it is that the first time you open an infoBox, the delete button routine is only run 1 time. But once you close the box, and open it again (or a different one), the routine runs multiple times. The more times you open infoBoxes, the more times the delete button is re-binding and in turn executing. I have things wrapped in a domready listener for the infoBox so that I can change the elements in the window to be specific to the properties of the object that's being clicked on. For some reason, the domready is firing multiple times (i thought it would only fire one time) and my delete click is being bound again. Before using the infoBox class, the regular infoWindow did not require a domready in order to use jQuery to change the title and description, and the click event was never bound over and over. I am at a total loss and have spent far too much time on this. Any help would be appreciated. A sample test file is as follows: , Try changing this:
$('.deleteLink').click(function(event) {})

jQuery animate on click multiple times


Tag : javascript , By : nemof
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Set the CSS of the element before animating it, making sure it's back at it's initial position with marginTop and can't be seen using opacity.
Add a stop() in their to prevent animations being queued and there you have it:
var color = ["blue", "purple", "green"];

$("#try-me").click(function() { 
    var colorClass = color[Math.floor(Math.random()*color.length)];
    $("#content")
        .css({opacity:0,marginTop:200})
        .removeClass()
        .addClass(colorClass)
        .stop(true,false)
        .animate({
            "margin-top": "50px",
            "opacity": "1"
        }, 700);
});

jquery animate rotate div multiple times on click


Tag : jquery , By : stan
Date : March 29 2020, 07:55 AM
seems to work fine 1st: You need to use deg instead of borderSpacing to avoid reset every time
2nd: I create two functions one for rotate and another one to reset the rotation
$(document).ready(function(){
  $('#foo').on('click' , function(){ // element click event
    var rotate_deg = parseInt($(this).data('rotate')); // get the data-rotate attribute in this case will return -90 change it on html if you like
    var next_rotation_angle = rotate_deg - 90; //for a new rotation angle .. in this case I use rotate_deg * 2 change it as you like
    var Times = 3; // how many rotate available
    if(rotate_deg / 90 >= -Times){
      RotateIt($(this) , rotate_deg); // run a function to rotate the element 
      $(this).data('rotate' , next_rotation_angle); // append a new angle to data-rotate attribute
    }else{alert('Can not click any more')}
  });
  $('#reset_rotation').on('click' , function(){ // reset button click event
    ResetRotate($('#foo')); // reset the element rotation to 0
    $('#foo').data('rotate' , '-90');
  });
});
//function to rotate .. use this code to rotate any element you need by using RotateIt(element , rotate_deg);
function RotateIt(el , deg){
  $(el).stop().animate({deg: deg}, {
      step: function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)'); 
        $(this).css('-moz-transform','rotate('+now+'deg)');
        $(this).css('transform','rotate('+now+'deg)');
      },
      duration:'slow'
  },'linear');
}
// function to reset the rotate .. while deg here is 0 no need to set deg as an argument 
function ResetRotate(el){
  $(el).stop().animate({deg: 0}, {
      step: function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)'); 
        $(this).css('-moz-transform','rotate('+now+'deg)');
        $(this).css('transform','rotate('+now+'deg)');
      },
      duration:'slow'
  },'linear');
}
body {
    font-family: sans-serif;
}

#foo {
    width:100px;
    height:100px;
    position:absolute;
    top:100px;
    left:100px; 
    border-spacing: 0;
    background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" data-rotate="-90">Text</div>
<p>See <a href="http://jsfiddle.net/ryleyb/ERRmd/">inspiration</a>
<button id="reset_rotation">Reset Rotation</button>

ActionScript 3 - anonymous function as click handler is called multiple times per click


Tag : flash , By : PepeM
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • How to Make a jQuery Table Cell(td) clickable to Run a Function?
  • Prevent the duplicate function onchange event jQuery
  • Reactjs Input Upload doesn't return local URL
  • An unexpected 'StartObject' node was found when reading from the JSON reader. A 'PrimitiveValue' node was expected
  • How to filter a JSON Array, with an eventListener input value at keyup
  • How to separate the different properties of filter in css?
  • Why dont work change event of bootstrap input spinner?
  • How to hide overflow text content in react
  • Is there another way to write line 6
  • Cypress - how to find by text content?
  • How to setstate for the dynamic checkboxes in a loop in react?
  • Is display:none safe?
  • How to create a form to change part of a href url of a button?
  • Put many function inside function in Javascript
  • how to exit from loop after a ajax call
  • Do Angular Reactive Form Validator.min/max check Perform Type Conversions before checking the value?
  • How to Replace Text Within Script Tags Using JQuery
  • add variable to object if not undefined using short-hand
  • How can I effectively curve my items inside a list?
  • Add new record Keyboard Shortcut on Kendo Grid Mvc
  • Time and Date running on page
  • Looping through page links puppeteer doesn't return values from the newly loaded page
  • Problem with Navigator.geoLocation.getCurrentPosition not working
  • Trying to change the id of an element with Javascript
  • Embedded Schema Inserting Blank in Meteor using Collection2
  • avoid useEffect to render at first load?
  • Why is this CSS transition only working correctly on the some clicks? How to solve it?
  • Interpolated values does not reflect the latest values in an Angular app
  • Javascript classes define attribute in constructor or outside the class
  • How to block scroll event passing through to iframe until iframe is active?
  • What is the purpose of "constructor" method in javascript?
  • Stencil JS not working with non-default imports
  • Are frameworks misleadingly named for marketing purposes?
  • React <Redirect> after transition not working
  • How to send multiple parameters in a function using EJS
  • React conditional style on custom click
  • Push a block of information to an array X times based on an external variable
  • How do I populate dropdown with names, and values (numeric ids)?
  • How to apply styling to elements created with .insertAdjacentHtml method
  • Positioning key:value of an object
  • Referencing DOM Elements with React Hooks
  • TypeError: Method "getRange" of null when using multiple scripts (Libraries) in Google scripts
  • Why can't I check if an environment variable is undefined?
  • Is there a way to find what parts are the same between two strings?
  • Every change done with magicscroll and greensock get reset when I hit the bottom of the page
  • Fix a 'Cannot read property handleClick of undefined error' (and issues related to deleting an item from the DOM)
  • Answer to message if sent within a period of time
  • Enabling a button based on selected values
  • Get All possible matches between forward slashes
  • get the CSS maxWidth value of the parent javascript
  • Async function returning existing array as undefined
  • Using drop-down list to change multiple values in separate table cells
  • How to remove nested empty objects in JavaScript?
  • Convert value from text field to paragraph
  • Sorting a list based on instructions in Javascript
  • Post request doesn't work in NodeJS, OK with Request
  • How to make footer align to center in nested component scenario in React
  • fresh installed pwa does not show content
  • Working around unset "length" property on partial functions created with lodash's partialRight
  • V8 console.log does not print
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com