Delegating an event to the whole object

Question

I have a jQuery plugin (which I've written) which has an option to match an optional child selector. Ie: If I have this markup:

<div class="header">
  <a id="item-name">Blah</a>
  <span class="some-data">Numbers and Stuff</a>
  <span class="other-data">Bananas</a>
</div>

Orignally, I delegated the click event to the whole .header using:

headerDiv.on('click', function () {

But then needed to limit the click to only the anchor, so to maintain compatibility, I used the alternative syntax:

headerDiv.on('click',headerSelector, function () {

Where headerSelector, by default is *, but I could pass a to limit it to just the anchor. The default * selector I'm now using seems problematic though, sometimes clicks aren't registered. Is there a proper way to match the element itself when using the delegated event syntax?

please show code of the event binder in your plugin – Andriy Ivaneyko Feb 09 '17 at 13:27 — Andriy Ivaneyko, Feb 09 '17 at 13:27

score 0 · Answer 1 · answered Feb 09 '17 at 12:00

0

By default you can do

headerSelector = headerDiv

I think it will be equal to headerDiv.on('click', function () {

answered Feb 09 '17 at 12:00

naortor

2,019
12
26

I think this will not work because it will look for headerDiv inside headerDiv – Monzurul Shimul Feb 09 '17 at 12:21

score 0 · Answer 2 · answered Feb 09 '17 at 12:20

0

Use document as the parent element and inside selector use headerDiv and then a *. if child is given replace * with it.

$(document).on('click', "headerDiv *", function(){})

answered Feb 09 '17 at 12:20

Monzurul Shimul

8,132
2
28
42

Delegating an event to the whole object

2 Answers2