If someone applies Google Translate to a site of mine, it usually changes href attribute values on anchors. This prevents Bootstrap tabs to work. Is there a way to check if some JavaScript is changing attributes of a specific class of anchors? I tried
jQuery(document).ready(function(){
jQuery("a.nav-link").bind('change', function(event) {
console.log( jQuery("a.nav-link").attr("href") );
});
});
but it does not work. I see nothing in console after translation.
Here is an example:
Go to
https://genealogia.dejudicibus.it/index.php?f=dejudicibus&b=ventimiglia&c=xiv&p=13__a
This is made by using the Bootstrap tabbable divisions. If you click on "Fonti" you see the second section. If you INSPECT code, you can see that the href is simply a fragment, that is,
<a class="nav-link" id="tab-t13__a-1" data-toggle="tab" href="#t13__a-1" role="tab" aria-controls="t13__a-1" aria-selected="true">Fonti</a>
Now, if you click on the top-right white icon to translate to English (not the automatic translator popup a browser may offer)...
... you can see that the link is changed to
<a class="nav-link" id="tab-t13__a-1" data-toggle="tab" href="https://genealogia-dejudicibus-it.translate.goog/index.php?_x_tr_sl=it&_x_tr_tl=en&_x_tr_hl=en-US&_x_tr_pto=wapp#t13__a-1" role="tab" aria-controls="t13__a-1" aria-selected="true">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;" class="">Sources</font>
</font>
</a>
That breaks the Bootstrap mechanism. If you click on sources nothing happens.