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

Question

I just tried switching my application to jQuery 3. I passed the test and everything worked as expected until I came to a piece of my application that used the "#" symbol in the selector. I have a jQuery part 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 a selector containing this character?

Answer 1

, , -, 2.0, 2.1.3

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

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

jQuery 2.2 1.12 .

@BoltClock, : "#" .

---

esacape # \\; ; $.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/

Answer 2

jQuery, :

, .

css:

https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

CSS ( , ) [a-zA-Z0-9] ISO 10646 U + 00A0 , (-) (_); , . ISO 10646 (. ). , "B & W?" "B\& W \?" "B\26 W\3F".

#, :

                         //Note the quotes v --------- v
.find('.filterFeedItem[data-component-type="#somefilter"]');