CODEWITHSUNDEEP
javascripthtml
user9217262
user9217262

Reputation: 35

Using dynamic html in javascript file

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

Upvotes: 1

Views: 75

Answers (1)

Kishan Rajdev
Kishan Rajdev

Reputation: 1965

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.

Upvotes: 1

Related Questions