`hx-on` adds event listener each time a new node is loaded into the DOM #1861

raphael-p · 2023-10-05T18:10:09Z

raphael-p
Oct 5, 2023

I'm having this issue where I set 2 event listeners on an HTML node using hx-on. This is fine until I trigger completely unrelated request from a <button> which swaps some HTML into the DOM. It seems like the first of the 2 listeners on the <div> gets added again for each new node that is introduced. So I'll end up with many listeners on that <div>.

There's a couple ways I can get around this but I'm wondering if this isn't some bug within HTMX, it doesn't seem like desirable behaviour.

Here is a minimum reproducible example:

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/htmx.org@1.9.6"></script>
</head>
<body>
	<div
		hx-on:custom-event-a="console.log('event a!')"
		hx-on:custom-event-b="console.log('event b!)"
	></div>
	<button hx-get="/dummy">click here</button>
</body>
</html>

/dummy just returns "<div>" with status code 200. "custom-event-a" is the one that gets added multiple times, "custom-event-b" just gets added once. Same behaviour on Firefox & Chrome.

UPDATE: I made a PR to fix this #1862

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`hx-on` adds event listener each time a new node is loaded into the DOM #1861

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

hx-on adds event listener each time a new node is loaded into the DOM #1861

raphael-p Oct 5, 2023

Replies: 0 comments

`hx-on` adds event listener each time a new node is loaded into the DOM #1861

raphael-p
Oct 5, 2023