jQuery生成的元素将不会调用函数

Question

我已经从ajax生成了定位，这是代码

  html+=' <a  class="btn-floating activator btn-move-up z-depth-4 modal-trigger right" href=".update-topic-modals" >'
                 html+='<i class="material-icons  blue-text text-darken-4 white" id="editmodal" onclick="editFunction('+value._id+');" >edit</i></a>'

当我单击此锚定函数时：editFunction（value）未调用 这是一个editFunction（）代码

    <script>function editFunction(_id) {  alert(_id);      }</script> 

这是它的样子

当我按此btn函数未调用时

Answer 1

您需要进行一些更改

1. 移动onclick
2. 将数据存储在数据属性中
3. 代理点击
点击
4. preventDefault不会加载href

function editFunction(_id) {
  console.log(_id);
}

var value = {
  _id: "hello"
}

html = '<a data-id="' + value._id + '" class="btn-floating activator btn-move-up z-depth-4 modal-trigger right" href=".update-topic-modals" >'
html += '<i class="material-icons  blue-text text-darken-4 white" id="editmodal">edit</i></a>'

$("#container").on("click",".modal-trigger",function(e) {
  e.preventDefault();
  editFunction($(this).attr("data-id"));
});

$("#container").append(html)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>