如何在 ionic 4 的动态 HTML 中添加点击事件？

Question

我使用JQuery添加了一个项目，但是我想添加点击事件来删除这个项目但是没有触发点击，所以请帮助我。

这是我的代码，

.ts 文件

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");
  }

Answer 1

尝试以下代码

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

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

Answer 2

请查看此 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>

有关更多信息，请访问此 url

工作Urlhttps://stackblitz.com/edit/ionic-qh4ucv

Url 与 Javascript：https://stackblitz.com/edit/ionic-58drvj 如果您使用 javascript 或 jquery.

，您可能会遇到其他问题

注意：ion-icon 不能直接与 stack blitz 一起使用。所以，我在那里提示获取要删除的项目的索引

如何在 ionic 4 的动态 HTML 中添加点击事件？

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

jquery

ionic-framework

ionic4