DataTable中图标的意外显示

Question

我的DataTable出现问题，只有在页面刷新之前才会以奇怪的方式显示图标。那是当我刷新它正常显示的页面时。

请参阅：

以下是此col的我的innerHTML代码：

tblTds[2].innerHTML = '<a href="#" onclick="deleteItem(' + "'" + aData[2] + "'" + ');"><i style="color:red" class="fa fa-times" title="Delete Item" id="item' + aData[2] + '"></i></a>';

我无法弄清楚发生了什么，有人看过这个或类似的东西吗？

Answer 1

我认为这就是为什么更好的做法是从html添加html。这减少了犯错的可能性。

   
var addNewDeleteItem = function(tableCell, onClickEvent) {
  var deleteElement = document.getElementById("delete-icon-template");      
  deleteElement.removeAttribute("id");
  var html = deleteElement.outerHTML;
  deleteElement.onClick = onClickEvent;
  tableCell.innerHTML = html;
  
}

addNewDeleteItem(tblTds[2], deleteItem()); // aData[2] should be catch from that click event's raise point.

.hide {
  display: none;
}

<div class="hide">
  <a id="delete-icon-template" onClick="" class="fa fa-times" title="delete"></a>
</div>

Answer 2

我认为你对deleteItem方法的调用是不正确的。需要使用转义字符。 像 -

这样的东西

tblTds[2].innerHTML = "<a href=\"#\" onclick=\"deleteItem('" + aData[2] + "');\"><i style=\"color:red\" class=\"fa fa-times\" title=\"Delete Item\" id=\"item" + aData[2] + "\"></i></a>";

为什么您的代码在刷新后有效？ - 为此你需要在刷新之前和之后比较innerHTML。