jQuery event.stopPropagation() and event issues

Question

I'm creating a jQuery script that add a pin to a map on click event, the problem is that i need that event to work only on the map not his sons too..

This is my code:

$("div#map").click(function (e) {
    $('<div class="pin"></div>').css({
        left: a_variable,
        top: another_variable
    }).appendTo(this);

    $("div.pin").click(function (e) { e.stopPropagation(); });
})

Another problem is that under this code i have something like this:

$("div.pin").mousedown(function (e) {
    if(e.which == 1) {
        console.log("down");
        moving = true;
        $(this).addClass("moving");
    } else if(e.which == 3) {
        console.log("right");
    }
});

Will this work with pins created after the script load too?

JsFiddle: http://jsfiddle.net/vB2Gb/

looks like you might have to use [event delegation](http://learn.jquery.com/events/event-delegation/) — Arun P Johny, Aug 01 '14 at 13:11
I don't understand, should I delegate events to pins from the map? — XandruDavid, Aug 01 '14 at 13:13
If you have a solution, please post it and then accept it when you can. — MattD, Aug 01 '14 at 13:20
if you care about older browsers, you should always check the function before calling stopPropagation aka if(e.stopPropagation) e.stopPropagation(); — Mike, Aug 01 '14 at 13:27
@Mike: As that is a jQuery event object, that should already be handled for you. — iCollect.it Ltd, Aug 01 '14 at 13:30
Oh, I wasn't aware that jQuery polyfills the stopPropagation event, good to know. — Mike, Aug 01 '14 at 13:36

score 1 · Accepted Answer · answered Aug 01 '14 at 13:24

I made a number of adjustments to your code:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/vB2Gb/1/

$(function () {
    var $map = $("div#map");
    $map.click(function (e) {
        var $pin = $('<div class="pin"></div>').css({
            left: (((e.pageX + 3 - $map.position().left) * 100) / $map.width()) + "%",
            top: (((e.pageY - 10 - $map.position().top) * 100) / $map.height()) + "%"
        });
        $pin.appendTo($map);
    })
    $map.on('click', "div.pin", function (e) {
        e.stopPropagation();
    });

    var moving = false;

    var pin_id;
    var pin_left;
    var pin_top;

    $map.on('mousedown', "div.pin", function (e) {
        if (e.which == 1) {
            console.log("down");
            moving = true;
            $(this).addClass("moving");
        } else if (e.which == 3) {
            console.log("right");
        }
    });

    $map.on('contextmenu', "div.pin", function (e) {
        return false;
    });

    $(document).mousemove(function (e) {
        if (moving) {
            if (e.pageX <= $map.position().left) {
                pin_left = 0;
            } else if (e.pageY <= $map.position().top) {
                pin_top = 0;
            } else {
                console.log("moving");
                pin_id = 1;
                pin_left = (((e.pageX + 3 - $map.position().left) * 100) / $map.width());
                pin_top = (((e.pageY - 10 - $map.position().top) * 100) / $map.height());
                $(".moving").css("left", pin_left + "%");
                $(".moving").css("top", pin_top + "%");
            }
        }
    });

    $(document).mouseup(function (e) {
        if (moving) {
            console.log("up");
            moving = false;
            $(".moving").removeClass("moving");
            dbMovePin(pin_id, pin_left, pin_top);
        }
    });

});

function dbMovePin(pin_id, pin_left, pin_top) {
    $.post(
        "mapsave.php", {
        action: "move_pin",
        id: pin_id,
        left: pin_left,
        top: pin_top
    },

    function (data, status) {
        //alert("Data: " + data + "\nStatus: " + status);
    });
}

This includes using delegated events (with on) for both the mouse down events and the pin click. Sharing a single variable for the map etc

score 0 · Answer 2 · answered Aug 01 '14 at 13:24

0

Event Delegation does what i need:

I've changed

 $("div.pin").mousedown(function (e) { ... });

with

$("div#map").on("mousedown", "div", function (e) {

answered Aug 01 '14 at 13:24

XandruDavid

310
3
13

There are similar changes you can make for the other events. Example posted. I also cleaned up the code as you should not re-use jQuery selectors over and over, but use temp variables instead. – iCollect.it Ltd Aug 01 '14 at 13:26

score 0 · Answer 3 · edited May 23 '17 at 12:20

Since you are dealing with dynamically added elements, you need to use event delegation.

$("#map").click(function (e) {
    $('<div class="pin"></div>').css({
        left: a_variable,
        top: another_variable
    }).appendTo(this);
}).on('click', '.pin', function (e) {
    //have a single delegated click handler
    e.stopPropagation();
}).on('mousedown', '.pin', function (e) {
    //use a delegated handler for mousedown also
    if (e.which == 1) {
        console.log("down");
        moving = true;
        $(this).addClass("moving");
    } else if (e.which == 3) {
        console.log("right");
    }
})

Also see Event binding on dynamically created elements?

jQuery event.stopPropagation() and event issues

3 Answers3

JSFiddle: http://jsfiddle.net/TrueBlueAussie/vB2Gb/1/