如何在动态创建的元素上调用jQuery函数？

看起来你在处理Ajax生成的动态按钮时遇到了函数调用不生效的问题，我来帮你分析一下原因并给出可行的解决方案。

首先，先说说你原来代码里的几个小问题：

1. 你定义的encryptIt是普通函数，但你用jQuery(this).encryptIt()去调用——这是在尝试调用jQuery对象的方法，而普通函数并没有挂载到jQuery的原型上，所以这行代码其实会报错，导致alert没触发。
2. DOMNodeInserted事件已经被浏览器标记为废弃，不仅性能差，还可能在不同浏览器里有兼容性问题，这也是它没生效的原因之一。

下面给你两种靠谱的解决思路：

方案一：在创建按钮时直接调用函数（推荐） #

既然按钮是你通过Ajax回调动态创建的，那最直接高效的方式就是在创建按钮的那一刻就处理它，不需要依赖DOM事件监听。示例代码如下：

// 假设这是你的Ajax请求回调
$.ajax({
  url: "你的接口地址",
  success: function(data) {
    // 1. 创建按钮元素
    const $userBtn = $(`
      <button class="light UserInfo_" data-toggle="dropdown" aria-expanded="true">
        ${data.DriverName}
      </button>
    `);

    // 2. 直接调用函数，同时可以设置data属性
    $userBtn.encryptIt();

    // 3. 把按钮添加到页面的目标容器里
    $("#目标容器的ID").append($userBtn);
  }
});

// 把encryptIt转换成jQuery插件，这样就能用jQuery对象直接调用了
$.fn.encryptIt = function() {
  alert('hi');
  // 这里可以设置你需要的data属性，比如：
  this.data("encrypted-key", "你的加密值");
  return this; // 保持jQuery链式调用的特性
};

这种方式的好处是：没有事件监听的延迟，性能更好，逻辑也更清晰——你完全控制了按钮从创建到添加到页面的整个流程。

方案二：用MutationObserver替代废弃的DOMNodeInserted #

如果因为某些原因，你没办法在创建按钮的代码里直接处理，那可以用现代浏览器推荐的MutationObserver来监听DOM变化，它比DOMNodeInserted更可靠、性能更优。示例：

// 找到按钮会被插入的父容器（一定要指定具体容器，不要监听整个document）
const targetContainer = document.querySelector("#目标容器的ID");

// 创建MutationObserver实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach(function(node) {
      // 检查当前节点是不是目标按钮
      if (node.classList?.contains("UserInfo_")) {
        $(node).encryptIt();
      }
      // 检查新增节点的子元素里有没有目标按钮（防止父元素被批量插入）
      const childBtns = node.querySelectorAll(".UserInfo_");
      $(childBtns).encryptIt();
    });
  });
});

// 配置监听选项：监听子节点添加，同时检查子树
observer.observe(targetContainer, { childList: true, subtree: true });

// 同样要把encryptIt做成jQuery插件
$.fn.encryptIt = function() {
  alert('hi');
  this.data("encrypted-key", "你的加密值");
  return this;
};

补充：如果你不想把函数做成jQuery插件 #

也可以直接调用普通函数，只需要在回调里改成：

// 方案一的回调里
encryptIt.call($userBtn[0]);

// 或者方案二的回调里
encryptIt.call(node);

// 普通函数写法
function encryptIt() {
  alert('hi');
  // 设置data属性
  $(this).data("encrypted-key", "你的加密值");
}

这样也能正常触发函数，同时通过this拿到按钮元素。

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