-1
$(document).on('focus', '.mask-date, .mask-phone', function () {
 ...    
}):

For the above statement is there a way to use wildcard, like below. except that one does not work.

$(document).on('focus', '[class^=mask-]', function () {
 ...
});
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
xfloys2112
  • 605
  • 1
  • 5
  • 13
  • 1
    Your wildcard should work, though you may need to put quotes around the value. Also show us the html that it will match on. `^=` requires the class to be at the very start of the attribute. – Taplar Dec 07 '18 at 21:58
  • That is an attribute equals selector. If the class you are targeting isn't the first class in the attribute, that selector won't function the way you expect. – Kevin B Dec 07 '18 at 21:59
  • Use `[class^="mask-"]` instead. I assume the `-` at the end requires quoting. – connexo Dec 07 '18 at 21:59
  • Add a `mask` class to elements with either class on them. Then you can just use `'.mask'` instead of all of this other craziness :). – Heretic Monkey Dec 07 '18 at 22:01
  • ^ That's a valid solution, though it doesn't help the OP learn why their current approach is not working – Taplar Dec 07 '18 at 22:02
  • Related. https://stackoverflow.com/questions/33615334/jquery-finding-partial-class-name – Taplar Dec 07 '18 at 22:10

1 Answers1

1

The problem with your selector is that it's matching against the class attribute literally. If one of the inputs has

class="foo mask-date"

it won't match, because mask- is not at the beginning of the attribute as required by the ^= modifier. You can do better with:

[class*=mask-]

which will match anywhere in the attribute. This could get a false match if you also had something like class="bitmask-blah", but that's probably unlikely.

Barmar
  • 741,623
  • 53
  • 500
  • 612