JQuery mousemove not restarting

Question

The issue I am having is with $('.someclass').on('mousemove', function() { do something }); . So when I hover over a button it will dynamically add an element that will follow the mouse, once my counter reaches say 500, the new element is removed. This all works fine however when hovering back over the button it doesn't work the second time. Below is a code example.

Every time one hovers over the button a new dynamic element should be added and then removed after a set amount of mouse moves but it won't work the second hover.

$('.someClass').on('mouseover' function() { 

  $('.element').appendTo('body');

  $('body').on('mousemove', function(e) {
    var mousex = e.pageX + 20;
    var mousey = e.pageY;
    $('.element').css({ top: mousey, left: mousex, position: 'absolute' });

    if (mouse_move >= 500) {
      ('.element').remove();
    }
    mouse_move++;

  });

});

Answer 1

Here is a quick example. Not sure if this is what you want but I still stand by comment up above. I don't see you recreating that element on mouseover every time.

Fiddle: http://jsfiddle.net/AtheistP3ace/6k70v3x3/

JS:

$('.someClass').on('mouseover', function () {
    doStuff();
});

function doStuff() {

    $('.someClass').off('mouseover');
    $('<div class="element"></div>').appendTo('body');
    var mouse_move = 0;

    $('body').on('mousemove', function (e) {
        var mousex = e.pageX + 20;
        var mousey = e.pageY;
        $('.element').css({
            top: mousey,
            left: mousex,
            position: 'absolute'
        });

        if (mouse_move >= 500) {
            alert('removed');
            $('.element').remove();
            $('body').off('mousemove');
            $('.someClass').on('mouseover', function () {
                doStuff();
            });
        }
        mouse_move++;

    });
}

HTML:

<div class="someClass"></div>

CSS:

.someClass {
    width: 100%;
    height: 500px;
    background: red;
}
.element {
    height: 50px;
    width: 50px;
    background: yellow;
}

Answer 2

Typo: I guess it is just a mistake of a $ sign missing from the remove() statement.

Reset your counter and remove mousemove

Here is the working example : https://jsfiddle.net/uLo91hqb/3/

It should be like this:

mouse_move = 0;
$('.someClass').on('mouseover', function () {

    $('.element').appendTo('body');

    // Show the counter again
    // Purpose for >=0 is for fast mousemovement sometime 0 may not been recorded
    // It it quickly counts 3-4 .. You can see it in fiddle
    if (mouse_move >= 0) 
        $('.element').show();

    $('body').on('mousemove', function (e) {
        var mousex = e.pageX + 20;
        var mousey = e.pageY;
        $('.element').css({
            top: mousey,
            left: mousex,
            position: 'absolute'
        });

        if (mouse_move >= 500) {
            // Remove mousemove from the body
            $('body').off('mousemove');
            // Reset counter
            mouse_move = 0;
            $('.element').hide();
        }
        mouse_move++;
        $('.counter').html(mouse_move);

    });

});

Answer 3

From the doc :

$( selector ).hover( handlerIn, handlerOut )

handlerIn : A function to execute when the mouse pointer enters the element.

handlerOut : A function to execute when the mouse pointer leaves the element.

Example:

 $('p').hover(function () { $(this).css('color', '#f00') }, function () { $(this).css('color', '#000') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Hover me</p> 

You can follow my example to edit your js code.

Hope this help you.

Answer 4

I don't see where your variable 'mouse_move' ever gets defined or reset.
Try:

$('.someClass').on('mouseover' function() { 
  var mouse_move = 0;
  ...
});