时间戳

首页 > 解决方案 > 我们可以在 Angular 8 中创建 html 元素时绑定（单击）事件吗？

jquery - 我们可以在 Angular 8 中创建 html 元素时绑定（单击）事件吗？

问题描述

我正在尝试通过单击带有以下代码 HTML 的加号按钮来创建 HTML 输入框：

<button type='button' value='Add Button' class="btn btn-primary add-multiple-text-btn" id='addButton' (click)="addMultipleInput()"><i class="icon icon-plus"></i></button>

ts：

addMultipleInput(){
      if(this.counter>7){
        $(".add-error-msg").show().delay( 10000 ).hide(0);
        return false;
      }
      var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + this.counter).attr("class","d-flex TextBoxDiv form-group");
      newTextBoxDiv.after().html('<label class="mr-3 pt-1" for="textbox'+this.counter+' ">'+ this.counter + ' </label>' +
            '<input type="text" class="form-control validate width80" style="width:80%" name="textbox' + this.counter +
            '" id="textbox' + this.counter + '" value="" >'+
            '<span class="delete-inputs"><i class="icomoon icon-trash2 text-danger d-inline-block pt-2 pl-2" **(click) = "deleteInput()"** title="Delete" id="deleteInput'+this.counter+'"></i></span>');
      newTextBoxDiv.appendTo("#TextBoxesGroup");

      this.counter++;
    }

deleteInput() {
      alert("clicked");
    }

我们可以在创建输入字段时绑定 (click)="deleteInput()" 吗？我们将如何在同一个文件中创建 deleteInput() 函数定义？帮助将不胜感激。代码与 angular 和 jquery 混合在一起。我是 angular 新手

标签： jqueryhtmlangular

解决方案

您可以为您的功能使用列表。当有人单击添加或删除按钮时，您可以删除或添加列表中的数据，当您更新表格时，您可以看到您的更改。如果你想改变按钮和属性，你应该用脚本代码改变你的按钮。

推荐阅读