Overriding Webflow jQuery Event Hooks

So when you have complex things going on within a view. (Custom JavaScript) What you find out is that Webflow has permanently bound a delagative function with no name to all click events on any anchor, In my case enters MaterializeCSS JS lib which also uses jQuery to trigger upon ‘click’ to support tabbed navigation or in my case a form wizard using those tabs. I will share a simple solution to properly take back “control” over your application.

window.addEventListener('DOMContentLoaded', event => {
  const $ = window.jQuery || null
  if ($) {
  	$(document).on('click', 'a', e => {
            // add any logic to filter out targeting the affected behavior
            // eg. if (e.target.getAttribute('href').includes('#')) // then stop bubbling and action
            // call the following:
  		e.stopImmediatePropagation()
  	        e.preventDefault()
  	})
  }
})

YOU NOW HAVE CONTROL!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.