如何一次性创建带有点击事件处理程序的DOM元素？

问题原因 #

当前写法在拼接HTML字符串阶段就直接执行了eval(launchGenericProductSearch(topProducts))逻辑，会在页面加载、创建DOM元素时就触发函数运行，最终拼接到onclick属性中的实际是函数执行后的返回值，完全不符合点击触发的预期。同时该场景完全不需要使用eval，滥用eval还会带来安全隐患与调试成本。

推荐实现方案 #

优先使用jQuery事件绑定逻辑，避免内联事件的转义问题，也不会出现函数提前执行的问题：

// 阻止a标签默认跳转，点击时再执行目标函数
var productItemTop = $("<span>")
  .append(
    $("<a>", {
      class: "spamItemsX",
      href: "#",
      text: topProducts
    }).on("click", function (e) {
      e.preventDefault()
      launchGenericProductSearch(topProducts)
    })
  )

如果必须使用内联onclick写法，需要将函数调用逻辑作为字符串拼接，不要在拼接阶段直接执行函数，注意传参的引号转义即可：

var productItemTop = $(
  "<span>" +
    "<a class='spamItemsX' href='#' " +
    // 注意如果topProducts是字符串类型，需要额外加引号包裹转义
    "onclick='launchGenericProductSearch(\"" + topProducts + "\")'" +
    ">" +
    topProducts +
    "</a>" +
    "</span>"
);

注意事项 #

如果topProducts是对象、数组等复杂数据类型，不要使用内联onclick的写法，优先选择第一种事件绑定方案，通过闭包可以直接读取到外部的topProducts变量，不需要处理复杂的序列化和转义逻辑。

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