$dispatch broke events bubbling, after this.$root.innerHTML

[msa7]

Hi. Thanks for AlpineJS. I have a issue, could you please help. I replace this.$root.innerHTML = via ajax, but it broke events bubbling, so this.$dispatch('cart_item_update') does not work.

So this does not work

    async cart_qt_add(cart_item_id) {
      if (this.loading) { return }

      this.loading = true

      this.$root.innerHTML = await this.zoz.html_load(
                                `/cart/items/${cart_item_id}/qt_add?view=show_sf_item`,
                                { method: 'post' }
                              )

      this.$dispatch('cart_item_update')

      this.loading = false

This is fixed version

    async cart_qt_add(cart_item_id) {
      if (this.loading) { return }

      this.loading = true

      this.$root.innerHTML = await this.zoz.html_load(
                                `/cart/items/${cart_item_id}/qt_add?view=show_sf_item`,
                                { method: 'post' }
                              )

      window.dispatchEvent(new CustomEvent('cart_item_update'))

      this.loading = false

Any idea how to make this.$dispatch('cart_item_update') work?

[ekwoka]

Yeah, you removed the element and then dispatched on it.

So it bubbled up a disconnected tree.

[msa7]

thanks. What would be the correct way to load html from server in general?
Is it correct to use this.$el.innerHTML = "new html" or all html manipulations should be done via x-html?

[ekwoka]

either way is fine

Alpine.morph would be even better in many cases.