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.
data-placeholder
attribute. Note that.data()
doesn't create attributes.placeholder
via data api? if so it won't create an attribute. Otherwise it should work.this.el
? If it is a span it will not work as your syntax is for delegation