Using dynamic html in javascript file

Question

in my work, there is a phone button that when user clicks on it, few html elements are replaced there. To open these html elements, i used phoneOpenEditor function. In the new html elements, there is a cancel button that when user clicks on it, another html elements should be loaded. To use this button, i use closeEditor functon.

here is the constructor:

class BE_ContactEditor {
initialization

constructor() {
this.body = $(".contact-block-header");
this.phone = this.body.find(".js-phone");
this.events();

}

and here is the event part, in the event part:

events(){

this.phone.on("click",this.phoneOpenEditor.bind(this));


//it is the cancel button
this.phone.on('click', '.fa-minus-circle', this.closeEditor.bind(this));
}

here is the openEditor function that can be used with phone button:

phoneOpenEditor(e){
this.html = this.phone.html();
this.phone.html(`
  <div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div>
  `)
}

here is the closeEditor function that can be used with cancel button:

closeEditor(){
 this.html = this.phone.html();
 this.phone.html(`
   <div class="page-subtitle-backend narow cover selectable js-phone" data-type"phone"><div class="icon add big"><i class="fas fa-plus-circle"></i></div> add Phone</div>
   `)
 }

The problem is, the html elements inside the closeEditor function is not loaded after clicking on the cancel button.

I really will be appreciated if anyone can help me on this. Thanks a lot

Probably just an event bubble issue, since you're capturing "click" at the phone level and at the '.fa-minus-circle', but not stopping propagation. so it runs closeEditor, then immediately phoneOpenEditor. — Heretic Monkey
– Heretic Monkey, Commented May 22, 2018 at 16:35

Kishan Rajdev · Accepted Answer · 2018-05-22 17:05:05Z

1

You just have to add an event object to your closeEditor method as an argument and call this method of the event object. e.stopImmediatePropagation();

That should work. Here is the updated code,

closeEditor(e){
 e.stopImmediatePropagation();
 this.html = this.phone.html();
 this.phone.html(`
   <div class="page-subtitle-backend narow cover selectable js-phone" data-type"phone"><div class="icon add big"><i class="fas fa-plus-circle"></i></div> add Phone</div>
   `)
 }

Hope this helps.

edited May 22, 2018 at 17:05

answered May 22, 2018 at 16:59

Kishan Rajdev

1,9853 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using dynamic html in javascript file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related