Events Don't Get Removed When Re-Using An Element

The Issue

Event listeners (and maybe other attributes, not sure) don’t get removed when re-using an element.

Broken Code <>

const { h, app } = hyperapp
/** @jsx h */

app({
  model: true,
  actions: {
    toggle: model => !model
  },
  view: (model, actions) =>
    <div>
      {model && <div onClick={() => alert('🐛')}>a</div>}
      <div>b</div>
      <button onClick={actions.toggle}>toggle</button>
    </div>
})

How to reproduce with the codepen?

1. Click a. Notice how it properly alerts 🐛
2. Click b. Notice how it doesn’t do anything
3. Click toggle
4. Click b. WTF?

[jorgebucaran]

I think is fixed in master.

[rbiggs]

This is why I don’t like inline events. Event delegation solves this:

app({
  model: true,
  actions: {
    toggle: model => !model
  },
  view: (model, actions) =>
    <div id='parent'>
      {model && <div class='clickable'>a</div>}
      <div>b</div>
      <button onClick={actions.toggle}>toggle</button>
    </div>,
  
  subscriptions: [
    function() {
      // Define event on clickable parent.
      document.querySelector('#parent').addEventListener('click', function(e) {
        // Fire event when event target is "clickable".
        if (e.target.className === 'clickable') {
          alert('🐛')
        }
      })
    }
  ]
})

With event delegation you can add and delete event targets as you please without worrying about event management.