How can I handle click event for new messages

I handle message click event like this:
$$('.message').on('click', function(e){});

But this code works for old messages. But it dosen’t work for new message that just created. Old messages created by html structure have “.message” class, but new message created by addMessage method doesn’t have “message” class. So new messages don’t respond when click on them. How can I handle click event for new mesasges?

messages.addMessage({
text: message_text,
name: message_name,
avatar: message_avatar
});
{
  path:'/some-page/',
  on:{
    pageInit:function(e,page){
      page.$el.on('click','.message',function(e){
        console.log('click');
      });
    }
  }
}

@pvtallulah,@adasoft ,@DanielRiera (+ all moderators)
please create a FAQ section
it will help a lot of us

1 Like

Great! Thanks. I want to learn, what is the different between

$$('.message').on('click', function(e){});

and

page.$el.on('click','.message',function(e){});

when you say:

$$('.message').on('click', function(e){});

you’re telling to “the engine” to attach event (multi)
forEach element with a className => ‘message’
that exist in DOM at the moment you’re telling him to do so
so any “new element” won’t be registered

when you say:

page.$el.on('click','.message',function(e){});

you’re telling to “the engine” to attach event (single)
to ‘page.$el’ element (not to ‘message’ element)
so any time you click on ‘page.$el’
the engine will search (live) for a className => ‘message’ (only in child node)
and will (attach and) fire the event
so any “new element” will be registered (live)

1 Like