-
Notifications
You must be signed in to change notification settings - Fork 20.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support case-insensitive attribute selectors [attr="value" i] #4841
Comments
There isn't a case-insensitive attribute option for selectors. The https://w3c.github.io/html-reference/documents.html#case-insensitivity
|
Just to clarify that the case-insensitive attribute operator
In the example in my first post the non-delegated jQuery selector does work in modern browsers. As a simplified example here is another Codepen snippet: https://codepen.io/chrisblakley/pen/WNoRBNr?editors=1100 I appreciate your time, thanks. Currently (for anyone who stumbles upon this from Google), you'll need to either use a non-delegated jQuery selector: $('a[href$=".pdf" i]').on('click', function(){
//PDF extension was clicked
}); Or comma-separate your delegated selectors with case-sensitivity: $(document).on('click', 'a[href$=".pdf"], a[href$=".PDF"]', function(){
//PDF extension was clicked
}); |
Wow, thanks! That is new to me. Also, the case sensitivity here is for the value, not the name of the attribute. Since jQuery doesn't attempt to fill this new feature, the selector would fail for any situation where the Sizzle engine comes into play. That would be any browser where this CSS4 feature isn't supported, obviously such as IE11, but also in other situations such as a rooted query which isn't supported by native CSS. |
I updated the title to be more generic. Also, I created a bigger issue to evaluate CSS Selectors Level 4 support: #5111. |
While I was so happy to see that case-insensitive selectors work with jQuery (Ex:
jQuery('[href*="example" i]')
), I ran into an issue while updating my code that was listening for a click event with a delegated selector that used an attribute selector (I was upgrading my codebase to use case-insensitive attribute selectors).So this works:
This also works:
But this does not:
https://codepen.io/chrisblakley/pen/xxROJEq
When clicking on the bottom link, the case-insensitive attribute selector works great. However, the middle link results in the following console error (use your browser's console as the error does not appear in Codepen's provided console).
The top link works fine as long as the middle event listener is completely removed or commented out.
The text was updated successfully, but these errors were encountered: