How to show jQuery event handler on element
Chrome gives you the currently selected element in the inspector with $0. If you select a button in the DOM you can set and inspect the event handler with the following two code lines:
$($0).on('click', function() { console.log('Hello') })
jQuery._data($0, "events").click[0].handler
// => "function () { console.log('Hello') }"
This is useful for debugging.
Related cards:
jQuery: How to attach an event handler only once
With "attaching an event handler once" you possibly mean one of these two things:
Register a function for an event, and discard it once that event has happened
Use one instead of on.
$(element).one('eventName', function() { ... });
...
How to fix: iPad does not trigger click event on some elements
iPads will not trigger click events for all elements. You can fix that, but you don't want to know why.
Example: Capturing clicks on table rows (use case would be clicking the 1st link inside it for better UI). Consider this setup:
<table>
...
How to bind an event listener only once with Unpoly
You can use Unpoly's up.on with a named listener function and immediately unbind this event listener with { once: true }:
up.on('up:fragment:inserted', { once: true }, function () { ... })
In Unpoly 1 you c...
Event order when clicking on touch devices
Touch devices have their own set of events like touchstart or touchmove. Because mobile browsers should also work with with web applications that were build for mouse devices, to...
Invoices: How to properly round and calculate totals
While it might seem trivial to implement an invoice that sums up items and shows net, gross and vat totals, it actually involves a lot of rules and caveats. It is very easy to create invoices where numbers don't add up and a few cents are missing....
How to create giant memory leaks in AngularJS (and other client-side JavaScript)
This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.
Although this guide has been written for Angular 1 originally, most of the advice is relevant...
JavaScript without jQuery
This is a presentation from 2019-01-21.
Summary
- We want to move away from jQuery in future projects
- Motivations are performance, bundle size and general trends for the web platform.
- The native DOM API is much nicer than it used to be, a...
jQuery: Run an event handler only once
Simply use one(...) instead of on(...). It takes the same arguments.
Events triggered by jQuery cannot be observed by native event listeners
jQuery has a function $.fn.trigger(). You can use it to dispatch an event on a jQuery object:
let $element = $('.foo')
$element.trigger('change')
A caveat is that such an event will be received by jQuery event listeners, but ...
Capybara: Finding invisible elements and how to test that an element is not visible
When Capybara locates elements in the DOM, by default it allows only accessing visible elements -- when you are using a driver that supports it (e.g. Selenium, not the default Rack::Test driver).
Consider the following HTML:
<div class=...