@click events don't trigger in x-html rendered nested elements

[dgigafox]

Summary

Elements with a click event that are dynamically rendered using x-html isn't triggred

Steps to reproduce

I prepared 2 codepens to reproduce it:
v2 - https://codepen.io/dgigafox/pen/QWpXNyZ
v3 - https://codepen.io/dgigafox/pen/abJgZPK

Here is the html layout that both codepen are using:

<div x-data="data()" id="root">
    <template x-for="color in colors">
      <div x-html="content(color)"></div>
    </template>
  
  <button @click="activeColor = 'No color'">No color</button>
  
  <div>Color is: <span x-text="activeColor"></span></div>
</div>

<script>
  function data() {
    return {
  colors: ['Red', 'Orange', 'Yellow'], activeColor: null,
  setColor(color) { this.activeColor = color },
  content(color) { return `<button @click="setColor('${color}')" >${color}</button>` }
}
  }
</script>

Actual results

In v2, clicking on the Red, Orange, Yellow buttons changes the activeColor which is displayed at the bottom. Those buttons are dynamically rendered via x-html directive. Although in v3, with the same layout, click events aren't triggered - only the No color button is triggered since it is already present from the start.

Expected result

The corresponding color of the button should be set when the click event is triggered just like in v2 and should work as well in v3

[peterhijma]

Not only @click, but any directives / alpine stuff.

[dgigafox]

Hi @calebporzio first of all, thanks for the great work on alpinejs. I assumed this was resolved in 3.2.0 as mentioned
(Fixed) Evaluate Alpine syntax inside x-html #1646 but still, it does not seem to work on the codepen sample I worked on:
https://codepen.io/dgigafox/pen/abJgZPK in which I already switched my CDN to https://unpkg.com/[email protected]/dist/cdn.min.js

Please let me know if I missed something

[KevinBatdorf]

3.2.0 exposes the initTree method you can use to do this:

<div x-html="content()" x-init="$nextTick(() => Alpine.initTree($el.firstElementChild))"></div>

But it's probably something that should go into a PR. But for now that should work.

Here's a fork of your demo: https://codepen.io/KevinBatdorf/pen/MWmWVEN?editors=1010

[dgigafox]

This is a nice workaround. Thanks, @KevinBatdorf! And for the demo too.

[KevinBatdorf]

Updated my example to use x-init instead. x-effect is useful if the HTML content is changing each render, I think, but using x-init instead is better for this situation.

I updated the comment because these things tend to be copy/pasted and using x-init will only run once and is much more effecient for a majority of the time you'd use x-html.

If anyone needs that to be more dynamic and render on every state change, reply and I'll share how.

[tvdr]

Not sure if this is well known, but the thing here is that while x-for inserts the elements, the mutationobserver is paused, so if the element contains alpine code, it is not evaluated

I submitted a PR #1697 - as simple as wrapping x-html handler in a nextTick by default.

would love to hear some feedback if you guys think this could be a viable solution