如何将单击事件添加到typescript中动态添加的html元素

我正在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>'; 

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

单击此按钮，它应该会显示控制台日志

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

但这是行不通的。

---

有人需要解决方案吗？

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

你可以用

constructor(private elRef:ElementRef) {}

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

动态调用click事件
确认此订单（obj）{
var orderItemID=obj.target.dataset.oid；
}
ItemDetails（订单ID、itemIndex）{
if（$（“#accordionNew”+itemIndex）.closest（“div”）.html（）.indexOf（“div#”+orderId）=-1）{
this.oRequest=新的ORequestParameter（）；
var retrievedObject=localStorage.getItem（'userObject'）；
让userObject=JSON.parse（retrievedObject）作为AdminDashboardModel；
this.oRequest.SellerId=userObject.SellerId；
this.oRequest.OrderStatus=$（“#hdnOrderStatus”）.val（）.toString（）；
this.oRequest.OrderId=OrderId；
this.oRequest.OrderConfirmationFlag='0,1,2'；
让sProviderId=“0”；
如果（this.MultiSelectObjTypeSelected！=未定义）{
让result2=this.MultiSelectObjTypeSelected.map（a=>a.id）；
如果（result2.join（）.length>0）{
sProviderId=result2.join（）；
}
}
this.oRequest.ProviderID=sProviderId；
this.orderService.GetItemDetails（this.oRequest）.subscribe(
lstOrderItem=>{
this.lstOrderItem=lstOrderItem；
var sData=“”；
如果（this.lstOrderItem.length>0）{
sData+=“产品名称”；
sData+=“价格”；
sData+=”；
sData+=”；
var aTag=document.createElement（'a'）；
for（var i=0；i*/
sData+=”；
sData+=”；
sData+=“”+this.lstOrderItem[i].providerSellingPrice+“”；
sData+=”；
sData+=”；
sData+=‘待定’；
sData+=”；
sData+=”；
sData+=”；
}
sData+=”；
sData+=“账单总金额”；
sData+=”；
sData+=“价格：”+总金额+”；
sData+=”；
sData+=”；
}
否则{
$（“#errorMsg”）.removeClass（“隐藏”）；
$（“#errorMsg”）.addClass（“警报危险”）；
$（“#errorMsg”）.html（“未找到任何记录”）；
}
$（“#accordionNew”+itemIndex）.closest（“div”）.html（sData）；
让children=document.getElementsByClassName（“mylink”）；
for（设i=0；i{
此。确认此订单（事件）；
});
}
},
error=>this.errorMessage=错误
);
}
返回false；
} 

在我的情况下，我会这样做--

var-boxText=document.createElement（“div”）；
const contentString=''+this.mName+'
'+this.mObject.category+
“
点击此处了解更多信息”//按照你的代码
boxText.innerHTML=contentString；
const button=document.createElement（'button'）；
按钮。addEventListener（'单击'，（e）=>{
this.navigate（）；//您的typescript函数
});
button.innerText='在此处导航'；
boxText.appendChild（按钮）；

为什么不使用angular来添加html？@MujtabaKably您会怎么做？我不知道如何编写代码，我认为这将解决您的问题。仅供参考-不确定原因，但addEventHandler返回了“nota function”错误。使用addEventListener，效果非常好@firas489非常感谢你的提示。那是个错误。我修好了。打字脚本！=角度。@AntonyBooth即使标题只提到Typescript，问题也有角度标记；-）

constructor(private elRef:ElementRef) {}

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

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

var boxText = document.createElement("div");
const contentString = '<b>' + this.mName + '</b><br/> ' + this.mObject.category + 
'<br/> Click here for more information ';//as per your code

boxText.innerHTML = contentString;

const button = document.createElement('button');
button.addEventListener('click', (e) => {
    this.navigate();//your typescript function
});
button.innerText = 'Navigate here';
boxText.appendChild(button);