Targeting all of class, select only clicked element

Question

I posted a question yesterday and then deleted it, thinking I had figured that there was nothing wrong with this part of my code. However, after testing there still seems to be an issue.

Within the code below I want $(this) to select only the clicked element, not all of the class that I am targeting. However, the console logs 2, 3, 4, etc... not 1!

Basically I need the class "action" to be added only to the clicked element. Appreciate any help!

$("body").on("mousedown", ".moveable", function(e){
    var clickX = mouseX;
    var clickY = mouseY;

    $(this).addClass("action");
    console.log($(".action").length);

    inX = clickX - $(".action").position().left;
    inY = clickY - $(".action").position().top;

    timeout = setInterval(function(){

        $(".action").css("left", clickX + (mouseX - clickX) - inX);
        $(".action").css("top", clickY + (mouseY - clickY) - inY);

    }, 10);

    return false; 

});

I know I could use $(".moveable").on("mousedown", function() {...}); , $(this) then targets just the clicked element with the "moveable" class but I need the event to fire on dynamically added elements, hence me binding the event in the way I am. Maybe the way I am doing this is the problem?

I hope you can help!

Mike

Answer 1

I think what you need is to remove the action class from other elements as below. Also note to cache the jQuery selector so that you don't have to run the selector all the time.

If you are removing the action class, you will need to remove those element's interval also.

$("body").on("mousedown", ".moveable", function (e) {
    var clickX = mouseX;
    var clickY = mouseY;

    $('.action').removeClass('action').each(function () {
        //clear other element's interval also
        clearInterval($(this).data('moveable-timer'));
    });
    var $action = $(this).addClass("action");
    console.log($action.length);

    var position = $action.position();
    inX = clickX - position.left;
    inY = clickY - position.top;

    var timeout = setInterval(function () {

        $action.css("left", clickX + (mouseX - clickX) - inX);
        $action.css("top", clickY + (mouseY - clickY) - inY);

    }, 10);
    $action.data('moveable-timer', timeout);

    return false;

});

Answer 2

In your code you are always targeting .action class which is creating issue. User $(this) and which will target only current element. Try this:

$("body").on("mousedown", ".moveable", function(e){
    var clickX = mouseX;
    var clickY = mouseY;

    var $el = $(this);
    $el.addClass("action");

    inX = clickX - $el.position().left;
    inY = clickY - $el.position().top;

    timeout = setInterval(function(){

        $el.css("left", clickX + (mouseX - clickX) - inX);
        $el.css("top", clickY + (mouseY - clickY) - inY);

    }, 10);

    return false; 

});