Calling a custom function in jQuery event handler

Question

This is the function I want to call (it definitely works I tested it):

function enableCategoryPopup(event) {
    event.stopPropagation();
    var buttonOffset = $(this).offset();
    $('.category-popup').css({
      top: buttonOffset.top + 10,
      left: buttonOffset.left +10
    });
    $('.category-popup').show(100);
  }

And this is where I want to call it:

$(document).on("mousedown", ".tab-links li:nth-child(2)", function(event) {
    if (event.which == 3) {
      enableCategoryPopup();
    }
  });

My custom function should be called as soon as I right click the specified element but it doesn't. When I call alert("x") instead of enableCategoryPopup() it works, only my custom function doesn't get executed.

What am I doing wrong? How do I call my custom function?

Pass event object to function, enableCategoryPopup(event); — Tushar
– Tushar, Commented Nov 30, 2015 at 13:34
FYI, in your code, the propagation of event stop at document level, not at event target (".tab-links li:nth-child(2)"). So describe how does your code isn't working??? BTW, if you stop mousedown event to any ancestor of ".tab-links li:nth-child(2)", this delegated event won't be fired — A. Wolff
– A. Wolff, Commented Nov 30, 2015 at 13:47

stackoverfloweth · Accepted Answer · 2015-11-30 13:40:33Z

3

try handling the event from within the enableCategoryPopup function

function enableCategoryPopup(event) {
    if (event.which == 3) {
        event.stopPropagation();
        var buttonOffset = $(this).offset();
        $('.category-popup').css({
          top: buttonOffset.top + 10,
          left: buttonOffset.left +10
        });
        $('.category-popup').show(100);
    }
  }

  $(document).on("mousedown", ".tab-links li:nth-child(2)", enableCategoryPopup);

answered Nov 30, 2015 at 13:40

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

stackoverfloweth Over a year ago

awesome, happy to help

A. Wolff Over a year ago

Ya but doesn't explain why OP's code wasn't working?!

stackoverfloweth Over a year ago

my guess would be timing, or the function wasn't declared before the binding

A. Wolff Over a year ago

Using referenced method as in your answer (which is the relevant way of doing it), this method has to be defined before (could be hoisted) unlike in OP's code. I'm not sure what you mean by timing but anyway, if that fixes OP's issue, get my vote... :)

stackoverfloweth Over a year ago

thanks @A.Wolff, what I meant was that the click event was still happening before enabledCategoryPopup was able to stopPropagation(). OP could have also tried event.prevendDefault()

Collectives™ on Stack Overflow

Calling a custom function in jQuery event handler

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related