typescript 如何将点击事件添加到打字稿中动态添加的 html 元素

How to add click event to dynamically added html element in typescript

提问by Günter Z?chbauer

I'm building an app in angular 2. I want to add a click event to a dynamically added html element. I define a string (contentString), and in this string I define the html element.

我正在构建一个 angular 2 应用程序。我想向动态添加的 html 元素添加一个点击事件。我定义了一个字符串 (contentString)，在这个字符串中我定义了 html 元素。

var contentString = '<b>' + this.mName + '</b><br/> ' + this.mObject.category + '<br/> Click here for more information <button (click)="navigate()">Navigate here</button>'; 

This string is put inside a html element like this:

这个字符串被放在一个 html 元素中，如下所示：

var boxText = document.createElement("div");
    boxText.innerHTML = contentString;

Although when I inspect the element, it has the click event defined, but it does not trigger.

虽然当我检查元素时，它定义了点击事件，但它不会触发。

on click it should console log

单击它应该控制台日志

navigate() {
console.log("eeeehnnananaa");
}

But that does not work. Anyone a solution?

但这不起作用。任何人的解决方案？

回答by Günter Z?chbauer

Angular processes the template when the component is compiled. HTML added later is not compiled anymore and bindings are ignored.

Angular 在组件编译时处理模板。以后添加的 HTML 不再编译，绑定将被忽略。

You can use

您可以使用

constructor(private elRef:ElementRef) {}

ngAfterViewInit() {
  // assume dynamic HTML was added before
  this.elRef.nativeElement.querySelector('button').addEventListener('click', this.onClick.bind(this));
}

回答by Sanjay J. Khachane

Call click event dynamically

ConfirmThisOrder(obj) {
    var orderItemID = obj.target.dataset.oid;
}

ItemDetails(orderId, itemIndex) {
if ($("#accordionNew" + itemIndex).closest("div").html().indexOf("div_" + orderId) == -1) {
  this.oRequest = new ORequestParameter();
  var retrievedObject = localStorage.getItem('userObject');
  let userObject = JSON.parse(retrievedObject) as AdminDashboardModel;
  this.oRequest.SellerId = userObject.sellerId;
  this.oRequest.OrderStatus = $("#hdnOrderStatus").val().toString();
  this.oRequest.OrderId = orderId;
  this.oRequest.OrderConfirmationFlag = '0,1,2';
  let sProviderId = "0";
  if (this.MultiSelectObjTypeSelected != undefined) {
    let result2 = this.MultiSelectObjTypeSelected.map(a => a.id);
    if (result2.join().length > 0) {
      sProviderId = result2.join();
    }
  }
  this.oRequest.ProviderID = sProviderId;
  this.orderService.GetItemDetails(this.oRequest).subscribe(
    lstOrderItem => {
      this.lstOrderItem = lstOrderItem;
      var sData = "";
      if (this.lstOrderItem.length > 0) {
        sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-4 text-left' style='font-weight: bold;' id='div_" + orderId + "'>Product Name</div>"; 
        sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-4 text-center' style='font-weight: bold;'>Price</div>";
        sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-4 text-center' style='font-weight: bold;'></div>";
        sData += "<div class='clearfix'></div>";
        var aTag = document.createElement('a');
        for (var i = 0; i < this.lstOrderItem.length; i++) {
            sData += "<div style='background-color:#fff;padding:10px 0;'>";
            sData += "<div class='col-4 col-sm-4 col-lg-4 col-xs-4 col-md-4'>";
            sData += "<span style='text-align: justify;'>" + this.lstOrderItem[i].productName + "</span>"; /*<b style='color:red;' > (" + this.lstOrderItem[i].productType + ") < /b>*/
            sData += "</div>";

            sData += "<div class='col-4 col-sm-4 col-lg-4 col-xs-4 col-md-4 text-center'>";
            sData += "<span><i class='fa fa-inr'></i> " + this.lstOrderItem[i].providerSellingPrice + "</span>";
            sData += "</div>";

            sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-2 text-center' style='font-weight: bold;'>";
            sData += '<a  id="btn_' + this.lstOrderItem[i].orderItemID + '" data-oid=' + this.lstOrderItem[i].orderItemID + ' class="mylink btn btn-success" style="width:70px;">Pending</a>';
            sData += "</div>";
            sData += "</div>";
            sData += "<div class='clearfix'></div>";
        }

        sData += "<div style='background-color:#BFE7FF;padding:15px 0;'>";
        sData += "<div class='col-6 col-sm-6 col-lg-6 col-xs-6 col-md-6' style='font-weight: bold'>Total Billed Amount</div>";
        sData += "<div class='col-2 col-sm-2 col-lg-2 col-xs-2 col-md-2 pull-right text-right'>";
        sData += "<span><b>Price:</b> <i class='fa fa-inr'></i> " + totalAmount + "</span></div>";
        sData += "<div class='clearfix'></div>";
        sData += "</div>";
      }
      else {
        $("#errorMsg").removeClass("hidden");
        $("#errorMsg").addClass("alert-danger");
        $("#errorMsg").html("There was no record found");
      }

      $("#accordionNew" + itemIndex).closest("div").html(sData);
      let children = document.getElementsByClassName("mylink");
      for (let i = 0; i < children.length; i++) {
        children[i].addEventListener("click", (event: Event) => {
          this.ConfirmThisOrder(event);
        });
      }
    },
    error => this.errorMessage = <any>error
  );
}
return false;
}