时间戳

首页 > 解决方案 > jQuery 生成的元素不会调用函数

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

问题描述

我已经从 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) is not call here is a editFunction() code

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

这是它的样子

由 jQuery 生成的按钮图像

当我按下这个 btn 函数时没有调用

标签： jquerynode.jsajaxmongodb

解决方案

您需要进行一些更改

  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>

推荐阅读