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:

$('#link-container').on('click', 'a[href*="foo"]', function(){
	//This works
});

This also works:

$('a[href*="baz" i]').on('click', function(){
	//This works
});

But this does not:

$('#link-container').on('click', 'a[href*="bar" i]', function(){
	//This has an error
});

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.