Robert Robert - 3 months ago 15x
Javascript Question

Why can't jQuery 3 identify the '#' character in a selector?

I just tried switching my application to jQuery 3. I was going through some testing and everything was working as expected, until I came to a piece of my application that used a '#' symbol in a selector. I have a piece of jQuery that looks like this:

var $existingFilter = $container.find('.filterFeedItem[data-component-type=#somefilter]');

Using jQuery 3 I get an error:

jquery-3.0.0.js:1529 Uncaught Error: Syntax error,
unrecognized expression: .filterFeedItem[data-component-type=#somefilter]

Does anyone know why we jQuery can no longer parse elements containing this symbol?


Note, the change apparently took place at version 2.0, as version 2.1.3 returned element using selector

var $existingFilter1 = $container.find('.filterFeedItem[data-component-type=#somefilter]');


Though have not been able to locate specific reference to or description of change at jQuery 2.2 and 1.12 Released documentation.

Not certain if change is related to Selector: Remove "#" exception for identifier tokens?

You can esacape # character with \\; quote value at attribute selector; or use $.escapeSelector()

var $existingFilter = $container

var $existingFilter = $container

var selector = $.escapeSelector('.filterFeedItem[data-component-type=#somefilter]');
var $existingFilter = $container.find(selector);