[英]How to attach event to dynamically added HTML element?
I have a scenario where I am getting an HTML tring from the backend and I am rendering that string on HTML with [innerHTML]
.我有一个场景,我从后端获取一个 HTML 字符串,我正在使用[innerHTML]
在 HTML 上呈现该字符串。 I have string link this:我有字符串链接:
Please click on <a (click)='openMyFunction()' open dialog </a>
I am able to get the string rendered with the help of Angular sanitize pipe, but the click
handler is not working.我能够在 Angular sanitize 管道的帮助下获得呈现的字符串,但click
处理程序不起作用。 I know as its added dynamically the click
event is not getting triggered.我知道因为它是动态添加的,所以click
事件没有被触发。
Can anyone provide me a small example where I can make this click
even working?谁能给我一个小例子,我可以让这个click
甚至工作?
If you can get the new DOM element by its id or its class name, you can assign the event with element.addEventListener
:如果您可以通过 id 或类名获取新的 DOM 元素,则可以使用element.addEventListener
分配事件:
this.container.nativeElement.innerHTML = "<a class='mylink'>Click to show message</a>";
let children = document.getElementsByClassName("mylink");
for (let i = 0; i < children.length; i++) {
children[i].addEventListener("click", (event: Event) => {
alert("Hello world!");
});
}
You can see an example in this plunker .您可以在此 plunker 中看到一个示例。
let str = '<div>';
str += '<div>';
str += '<ul>';
str += '<li>';
str += '<span (click)="GetXYZ()">';
str += '<i class="fa fa-level-down" aria-hidden="true"></i>';
str += '</span>';
str += '</li>';
Product.forEach(item => {
str += '<li>';
str += '<a (click)="GetABC(' + item.Id + ')">';
str += '<div>';
str += '<div>';
str += '<input type="checkbox" ';
str += 'value="' + item.Id + '" class="chk-closed" id="category-' + item.Id + '">';
str += '<label for="cat-' + item.Id + '"></label>';
str += '</div>';
str += '</div>';
str += '' + item.Name + '';
str += '</a>';
str += '</li>';
});
str += '<li>';
str += '<button (click)="Add()">Add New</button>';
str += '</li>';
str += '</ul>';
str += '</div>';
str += '</div>';
Function - Add(), GetXYZ(),GetABC is shown in the browser inspect element and event is not working?函数 - Add()、GetXYZ()、GetABC 显示在浏览器检查元素中并且事件不起作用?
I am appending the HTML from ts.我正在从 ts 附加 HTML。
How to Call dynamically a button click event from angular 6如何从 Angular 6 动态调用按钮单击事件
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;
}
ConfirmThisOrder(obj) {
var orderItemID = obj.target.dataset.oid;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.