javascript - Strange error - Syntax error, unrecognized expression with a[href and canvas not displaying -


i have strange problem bootstrap , jquery javascript.

i using following jquery script smooth scrolling when clicking on anchor , when returning top of page whith button of browser (with removing #anchorname extension) :

$(function() {     $('a[href*=#]:not([href=#])').click(function(event) {       event.preventdefault();       if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {         var target = $(this.hash);       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');       if (target.length) {         var hash = this.hash; // 'this' not in scope in callback       $('html,body').animate({ scrolltop: target.offset().top - 55}, 300, function() {         href = window.location.href;         history.pushstate({page:href}, null, href.split('#')[0]+hash);         });       return false;       }       }       });      $(window).bind('popstate', function(event) {         var state = event.originalevent.state;         var target = window.location.href.split('#');         var href = target[0];         if (state) {         $('html,body').animate({ scrolltop: 0 }, 300, function() {           history.replacestate({}, null, href);           })         }         });      window.onload = function() {       history.replacestate({ path: window.location.href }, '');     }    }); 

if use double quote ( $('a[href*="#"]:not([href="#"])') ) script above works page have tested contains html5 canvas , canvas doesn't display.

on other side, if don't use double quote ( $('a[href*=#]:not([href=#])') )), "anchor" functionalities don't work (i have not smooth scrolling) , html5 canvas displayed ;

i saw on forums solution may :

1) double quoting :  $('a[href*="#"]:not([href="#"])') 

or

2) unescape # character  $('a[href*=\\#]:not([href=\\#])') 

i tried these 2 solutions none of them works.

with jquery 1.12.0, following error :

error: syntax error, unrecognized expression: a[href*=#]:not([href=#]) 

any welcome

update solution :

initially, code :

    $(function() {         $('a[href*=#]:not([href=#])').click(function(event) {           event.preventdefault();           if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {             var target = $(this.hash);           target = target.length ? target : $('[name=' + this.hash.slice(1) +']');           if (target.length) {             var hash = this.hash; // 'this' not in scope in callback           $('html,body').animate({ scrolltop: target.offset().top - 55}, 300, function() {             href = window.location.href;             history.pushstate({page:href}, null, href.split('#')[0]+hash);             });           return false;           }           }           });      $(window).bind('popstate', function(event) {         var state = event.originalevent.state;         var target = window.location.href.split('#');         var href = target[0];         if (state) {         $('html,body').animate({ scrolltop: 0 }, 300, function() {           history.replacestate({}, null, href);           })         }         });      window.onload = function() {       history.replacestate({ path: window.location.href }, '');         }        }); 

finally, version below works :

    $(window).bind("load", function () {        $('a[href*="#"]:not([href="#"])').click(function(event) {         event.preventdefault();         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {         var target = $(this.hash);       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');       if (target.length) {         var hash = this.hash; // 'this' not in scope in callback         $('html,body').animate({ scrolltop: target.offset().top - 55}, 300, function() {           href = window.location.href;           history.pushstate({page:href}, null, href.split('#')[0]+hash);         });         return false;       }       }       });        $(window).bind('popstate', function(event) {         var state = event.originalevent.state;         var target = window.location.href.split('#');         var href = target[0];         if (state) {           $('html,body').animate({ scrolltop: 0 }, 300, function() {           history.replacestate({}, null, href);           });         }       });     }); 

it seems that, initial version, script executed before page loading, maybe canvas not loading too. put script "$(window).bind("load", , think going anchor , return top of page executed once loaded. confirm ?

thanks


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -