Jquery callback variables

[Torite]

I hope this is a simple question!

I have something like this:

var pixelCount = 12;
$('.container').on("click", function moveLeft(event, pixelCount)) {
    var newPixelCount = 100 + pixelCount;
});

My problem is that I can’t pass in pixelCount - it is undefined within the jquery callback. I know that if I remove pixelCount from the callback’s arguments, it works, because it can access the global scope and finds var pixelCount there. But I want to be able to pass an argument INTO the callback and not rely on the global scope. I also want to preserve access to the event variable.

Is there a way to do this? If there isn’t, what is the best way to handle this without potentially abusing global scope?

[Paul_Wilkins]

With pixelCount as a function parameter, that ends up being undefined while in the scope of that function.

Remove that function parameter and you’ll gain access to pixelCount that’s outside of the function.

[Torite]

Thanks for responding, but I specifically wanted to avoid doing that (mentioned in the post), unless it is the only way?

How do I pass an argument into the callback WITHOUT relying on global/outer scope?

[m3g4p0p]

Hi @Torite, with jQuery you can specify additional data to be passed to the click handler while adding the event listener:

function moveLeft (event) {
  var newPixelCount = 100 + event.data
  // ...
}

$('.conatainer').on('click', 12, moveLeft)

[Torite]

Thanks! I never knew about that jquery ability. This makes things much easier and cleaner.

A followup - if I am NOT using jquery, how would I do it?

document.querySelector('#container').addEventListener('click', function moveLeft(event, pixelCount) {
  var newPixelCount = 100 + pixelCount;
  // ...
});

[m3g4p0p]

I don’t think there’s an immediate way to do this… jQuery events are actually wrappers around native DOM events (which you can access via event.originalEvent). So what you might do is re-dispatch the click as a a custom event with the pixel count set on the detail property:

function addCustomListener(element, namespace, type, data) {
  element.addEventListener(type, function (event) {
    var newEvent = new CustomEvent(namespace + ':' + type, {
      detail: {
        data: data,
        originalEvent: event
      }
    })

    element.dispatchEvent(newEvent)
  })
}

var container = document.getElementById('container')

container.addEventListener('my:click', function (event) {
  var pixelCount = 100 + event.detail.data
  // ...
})

addCustomListener(container, 'my', 'click', 12)

I’m not entirely sure if this makes things much cleaner though. :-)

[Torite]

Thanks again! It is an interesting idea, and knowing it isn’t (easily) possible is important, too, when thinking about how to organize functions.