How to add click event in dynamic HTML in ionic 4?

Question

I have added one item using JQuery but i want to add click event to remove this item but click is not triggered,So please help me.

This is my code,

.ts file

addmore() {
    var html = "<ion-item class='Ids" + this.exp + "' style='margin: 15px 10px 0px 10px;'>";
    html += " <ion-label position='floating' style='color: gray !important;'>Experience</ion-label>";
    html += " <ion-input type='text'></ion-input>";
    html += " <ion-icon class='remove' name='remove-circle' slot='end' style='margin-top:12%;font-size:18px;' (click)='removeExp()'></ion-icon>";
    html += "</ion-item>";
    console.log(this.exp);
    $(".experience").append(html);
    this.exp++;
  }

removeExp() {
    console.log("hi");
  }

Why do you have JQuery in with an Ionic project? That is not recommended. I doubt manipulating the DOM with something like JQuery will mix well with the angular lifecycle or change detection. — Jay Ordway
– Jay Ordway, Commented Mar 16, 2019 at 9:31
Okay then if i want to add extra input field (as i mention in my code) dynamically,how can i do it? — Aniruddh Thakor
– Aniruddh Thakor, Commented Mar 16, 2019 at 9:37
I suggest you to use component instead of this type of html. with the use of component you will get more control over each item. — Hardik
– Hardik, Commented Mar 16, 2019 at 10:08
In general, what are you trying to do? Add/Remove input fields with a couple buttons? — Jay Ordway
– Jay Ordway, Commented Mar 16, 2019 at 10:34

Hardik · Accepted Answer · 2019-03-18 14:36:43Z

1

Please have a look on this stackblitz url.

// necessary changes for component.
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      public exp = 2;
  experiences: any = [];
  constructor(public navCtrl: NavController) {
    this.experiences = [{ expId: 1, value: '', lable: '' }, { expId: 2, value: '', lable: '' }]
  }
    }

    // necessary changes for html code
    <div class="experience">
        <ion-item class="Ids" *ngFor="let ex of experiences">
            <ion-label position="floating">Experience {{ ex.expId }}</ion-label>
            <ion-input type="text"></ion-input>
            <!-- <ion-icon name="close-circle"></ion-icon> -->
        </ion-item>
  </div>
  <ion-item style="--border-style: none;">
    <ion-label slot="end" style="text-align: right; text-decoration: underline;" (click)="addmore()">Add more
    </ion-label>
    <ion-label slot="end" style="text-align: right; text-decoration: underline;" (click)="remove()">Remove
    </ion-label>
  </ion-item>

For more info please visit this url

Working Url https://stackblitz.com/edit/ionic-qh4ucv

Url with Javascript: https://stackblitz.com/edit/ionic-58drvj You might face other issue if you use javascript or jquery.

Note: ion-icon not working with stack blitz directly. So, I put prompt there for get index of item to remove

edited Mar 18, 2019 at 14:36

answered Mar 16, 2019 at 13:48

Hardik

3,3382 gold badges21 silver badges32 bronze badges

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

4 Comments

Aniruddh Thakor Over a year ago

my demo link :stackblitz.com/edit/ionic-zvpyxd i want to add input field dynamically using jquery or java script and then remove that dynamic field again.

Hardik Over a year ago

@AniruddhThakor why you want to use jquery or javascript in angular application? Why you don't want to get benefits of angular?

Aniruddh Thakor Over a year ago

okay, then i just want to put dynamic input field and remove that field so can you help me on it using angular?

Hardik Over a year ago

@AniruddhThakor I have updated my answer. please check it. Hope now you'll get what you want.

Ravindra Patel · Accepted Answer · 2019-03-16 10:49:19Z

0

try following code

function addClickEvent() {
  $(document).on('click', 'your-selector', function () {
      var btn = $(this);
      // do anything
  });
}

// Shorthand for $( document ).ready()
$(function () {
    addClickEvent();
});

edited Mar 16, 2019 at 10:49

answered Mar 16, 2019 at 9:37

Ravindra Patel

3374 silver badges15 bronze badges

1 Comment

Aniruddh Thakor Over a year ago

This is not working as i want to add and remove that field dynamically ,this is not a ideal solution.because if i console my global value it gives me undefined so please tell me how i can implement it in my code.

Collectives™ on Stack Overflow

How to add click event in dynamic HTML in ionic 4?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related