innerHTML and event listener

Questions
1

I have a question about adding the following html block with .innerHTML and the event listener for it.

I am inserting by javascript the following html code block: Adding happens with .innerHTML .

<li class="swipeout" @swipeout:deleted="onDeleted">
                 <div class="item-content swipeout-content">
                   <div class="item-inner">
                     <div class="item-title">Swipe left on me please</div>
                   </div>
                 </div>
                 <div class="swipeout-actions-right">
                   <a href="#" class="swipeout-delete">Delete</a>
                 </div>
               </li>

Then in the same template page where the above shown code is inserted with .innerHTML I have added an event listener like so:
These are all code from the kitchen sink.

<script>
  return {
    methods: {
      more: function () {
        var self = this;
        self.actions.open();
      },
      mark: function () {
        var app = this.$app;
        app.dialog.alert('Mark');
      },
      reply: function () {
        var app = this.$app;
        app.dialog.alert('Reply');
      },
      forward: function () {
        var app = this.$app;
        app.dialog.alert('Forward');
      },
      onDeleted: function () {
        var app = this.$app;
        app.dialog.alert('Thanks, item removed!');
      },
    },
    on: {
      pageBeforeRemove() {
        var self = this;
        self.actions.destroy();
      },
      pageInit: function () {
        var self = this;
        var app = self.$app;
        self.actions = app.actions.create({
          buttons: [
            [
              {
                text: 'Here comes some optional description or warning for actions below',
                label: true,
              },
              {
                text: 'Action 1',
              },
              {
                text: 'Action 2',
              },
            ],
            [
              {
                text: 'Cancel',
                bold: true,
              }
            ]
          ],
        })
      },
    }
  }
</script>

Now this is working fine when I am hard coding the html block. But when i am inserting it with .innerHTML then it does not work. I have no idea what is happening :exploding_head: Maybe someone knows what is going on so I can solve this problem? Because I am inserting the data which is coming from API, so that is why i am trying to insert with .innerHTML

2

Issue is SOLVED! No need for help anymore.

3

Put the solution to help others.

1 Like