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

Question

我已经从 ajax 生成了 anchore，这里是代码

  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. 移动点击
2. 将数据存储在数据属性中
3. 委托点击
4. 防止默认点击不加载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>