0

I understand you can use .on() to attach a single click event to an element and then specify which child elements receive the click. So, for example:

$(this.el).on("click", "span", function () {
    alert("Bloop!");
});

I need to be a bit more specific and target selectors with a particular attribute, like this:

$(this.el).on("click", "span[data-placeholder]", function () {
    alert("Bloop!");
});

That doesn't seem to work, though. As soon as I add the attribute it stops working. No errors, just doesn't seem to find the elements.

Is that the expected behavior? Is there a way around it?

CLARITY

$(this.el) is just a div that contains a number of elements, some of which are <span data-placeholder="First Name"></span> tags. There could be dozens of those <span> tags and I didn't want that many event listeners, so I thought I'd use .on() to add the click to the parent container.

9
  • 4
    That should work, as long as the span has a data-placeholder attribute. Note that .data() doesn't create attributes.
    – Kevin B
    Oct 8, 2013 at 21:34
  • 3
    Are you setting placeholder via data api? if so it won't create an attribute. Otherwise it should work.
    – PSL
    Oct 8, 2013 at 21:36
  • can you show your actual code jsfiddle.net? Oct 8, 2013 at 21:37
  • What is this.el? If it is a span it will not work as your syntax is for delegation
    – Starx
    Oct 8, 2013 at 21:38
  • @Starx Well, we know it is a parent of a span since the first snippet works.
    – Kevin B
    Oct 8, 2013 at 21:39

4 Answers 4

0

Here's JSFiddle showing your example working, with both existing <span>s and with newly created ones.

Just to be clear, this will work with your event delegation:

var span = $('<span>Test</span>');
span.attr('data-placeholder', 'test'); // declare as an attribute
$(this.el).append(span);
span.click();

This will not:

var span = $('<span>Test</span>');
span.data('placeholder', 'test'); // declare with .data()
$(this.el).append(span);
span.click();

jQuery's .data() method will read properties from data attributes if declared, but does not store them as attributes on the element when adding data.

Here's another JSFiddle.

0

try

$("span[data-placeholder]", this.el).on("click", function () {
    alert("Bloop!");
});
2
  • That would attach the event handler separately on each element which is what OP was trying to avoid as far as I can tell. Oct 8, 2013 at 21:35
  • @vp_arth for instance, if the spans within the element are deleted and recreated after creating the event handler. Read about delegated events.
    – cmbuckley
    Oct 8, 2013 at 21:39
0

You can choose to filter your spans

$('span', this.el).filter(function() {
     return $(this).hasAttr('data-placeholder');
}).on('click', function() {
   //This is for all the spans having data-placeholder
   //...
});

Or if the placeholder is set via data api:

$(this.el).filter(function() {
     return $(this).data('placeholder') != 'undefined';
}).on('click', function() {
   //This is for all the spans having data-placeholder
   //...
});

This functions above select those elements specifically, if event delegation on the OP is needed, then you can do the following:

$('span', this.el).on('click', 'span', function() {
     if($(this).data('placeholder') != 'undefined') {
         alert('bloop');
     }
});
12
  • 1
    Why do you think he doesn't want to use event delegation? Oct 8, 2013 at 21:46
  • @MattiVirkkunen, Because I thought that was not intended.
    – Starx
    Oct 8, 2013 at 21:49
  • You must've missed the "Why" at the beginning of my sentence Oct 8, 2013 at 21:50
  • @MattiVirkkunen, Oh.. due to this line need to be a bit more specific and target selectors with a particular attribute
    – Starx
    Oct 8, 2013 at 21:51
  • 1
    @Starx I think the opposite.
    – Kevin B
    Oct 8, 2013 at 21:56
-2

add a id to your span and pin point it using # tag

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.