JQuery Selector Referencing an Object Stops Working Under JQuery 1.12.4

[Terry_Howard]

I've been using the following JQuery selector to target internal links in a JQuery onHandler extension (1.7 or higher) with success on sites that are running either version 1.10.2 or 1.11.0 of JQuery:

[href*="' + ut.domain + '"],a:not([href^="#"],[href^="http"],[href^="tel:"])

However, on another site that is running 1.12.4 I get an error:

Uncaught Error: Syntax error, unrecognized expression for that selector.

The issue definitely seems to be isolated to the first part of the selector: [href*="' + ut.domain + '"]

Has anyone else experienced issues with this newer version of JQuery and these type of selectors that compare against an object?  Any advice on how to solve?  

[Terry_Howard]

A little further details, I noticed this in the console as well:
'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
This was in reference to something in: utui.tagcompanion.js

[kathleen_jo]

Hi @Terry_Howard. Let me see if I can find you some help. Sit tight.

[thyngster]

hi @Terry_Howard, I'm not sure at all about how Tealium's onHandler extension handles the selectors. But since jQuery 2.2.0/1.12.0 jQuery does some extra checks for unquoted variables. Please refer to the following Jquery Migrate Issue:

https://github.com/jquery/jquery-migrate/issues/140

I know your selector uses quotes properly ( not sure if the jQuery handler on tealium does some parsing messing up things ). 

Another thing I would try is using window.utag_data["ut.domain"] instead of just ut.domain, just to be sure data is passed propertly from the main variable.

[thyngster · Accepted solution]

@Terry_Howard I'm been investigating how the extensions works.

This is selector you're using:

[href*="' + ut.domain + '"],a:not([href^="#"],[href^="http"],[href^="tel:"])

Which Tealium transforms to the following piece of code:

if (1) {
if (typeof utag.runonce[37] == 'undefined') {
utag.runonce[37] = 1;
jQuery(document.body).on('click', '[href*="" + ut.domain + ""],a:not([href^="#"],[href^="http"],[href^="tel:"])', function(e) {
utag.link({
"event_action": 'click link'
})
})
}

As you can see single quotes are converted to double quotes, therefore you can't use variables within your selector. Where you running the same selector previously or using the ut.domain is a new addition?.

If you were previusly using single queotes it looks like something was updated on Tealium Side since the last time you used it in other places.

[Terry_Howard]

Hi @thyngster. I think you are correct, it is the change in how quotes are being handled in the newer versions of JQuery. My solution was to create a version of my extension for each affected domain that has the domain literally in the selector instead of the variable. Not a particularly scaleable way forward, but it works. I think the Tealium system would have to be updated to recognize the usage of a variable in a selector and appropriately handle the quotes all the way through to the page.

[kathleen_jo]

---

@Terry_Howard wrote:

Hi @thyngster. I think you are correct, it is the change in how quotes are being handled in the newer versions of JQuery. My solution was to create a version of my extension for each affected domain that has the domain literally in the selector instead of the variable. Not a particularly scaleable way forward, but it works. I think the Tealium system would have to be updated to recognize the usage of a variable in a selector and appropriately handle the quotes all the way through to the page.

---

Hi @Terry_Howard. Great point about the scalability. Let me check and see if we already have something in for variable in a selector usage. Hold on.