AJAX请求后如何为动态插入的HTML元素注册onclick点击函数

• 核心原因：函数作用域不匹配
  你定义的myfunc位于$(function() {})的闭包内部，属于局部函数，仅能在该闭包范围内被访问。而行内onclick属性绑定的事件触发时，会默认在全局window作用域下查找对应函数，自然无法找到闭包内的局部函数，因此抛出未定义错误。
  如果报错提示的是myfunct（多了末尾的t），请先检查代码是否存在拼写笔误。
• 潜在问题：字符串参数未加引号
  你当前拼接HTML的写法中，直接把字符串类型的mock变量插入到调用参数中，渲染后最终的HTML会变成<a href='#' onclick='myfunc(John)' class='mylink'>Alert me</a>，JS会把John识别为变量而非字符串，就算函数作用域问题解决后，也会继续抛出John is not defined的错误。

建议放弃行内onclick写法，改用jQuery事件委托绑定动态生成元素的事件，无需把函数暴露到全局，安全性和可维护性更高：

$(function() {
  // 提前通过事件委托绑定动态元素的点击事件
  $(document).on("click", ".mylink", function() {
    const input = $(this).data("input")
    alert("test: " + input)
  })

  $(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    $.ajax({
      url: 'https://dog.ceo/api/breeds/list/all',
      type : 'get',
      complete : function( qXHR, textStatus ) {
        var mock = "John"; // 从响应中提取的参数
        $('.appendedContainer').hide();
        // 把参数存在data属性中，不用写行内事件
        $('.appendedContainer').append(`<a href='#' class='mylink' data-input="${mock}">Alert me</a>`);
        $('.appendedContainer').fadeIn();
      }
    });
  });
});

如果一定要使用行内onclick的写法，只需要把myfunc函数挪到$(function() {})外部，挂载到全局作用域，同时给参数加上引号即可：

// 全局作用域下定义函数
function myfunc(input) {
  alert("test: " + input);
}

$(function() {
  // 其余逻辑不变，拼接时给参数加引号
  // ...
  $('.appendedContainer').append(`<a href='#' onclick='myfunc("${mock}")' class='mylink'>Alert me</a>`);
  // ...
})

内容的提问来源于stack exchange，提问作者membersound