Question

我已经使用 JQuery 添加了一项，但是我想添加click事件以删除该项，但是未触发点击，因此请帮助我。

这是我的代码，

.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

请查看此stackblitz网址。

// 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

工作网址https://stackblitz.com/edit/ionic-qh4ucv

使用Javascript的网址：https://stackblitz.com/edit/ionic-58drvj 如果您使用javascript或jquery，则可能会遇到其他问题。

注意：ion-icon不能直接与堆栈闪电合作。所以，我在提示处输入要删除的项目的索引

Answer 2

尝试以下代码

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

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

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

2 个答案: