javascript - Why can't jQuery 3 identify the '#' character in an attribute selector?

Question

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 jQuery can no longer parse selectors containing this symbol?

Answer 1

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]');

jsfiddle https://jsfiddle.net/f8nej922/2/

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

As noted by @BoltClock, 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
                      .find('.filterFeedItem[data-component-type=\#somefilter]');

---

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

---

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

jsfiddle https://jsfiddle.net/f8nej922/4/