jQuery点击按钮创建DOM元素时如何返回新生成的div而非原按钮

你遗漏了jQuery的两个核心设计规则：

• jQuery.on() 方法的返回值固定为绑定事件的jQuery对象本身，目的是支持链式调用，不会返回事件处理函数的执行结果
• jQuery.trigger() 方法的返回值同样固定为触发事件的jQuery对象本身，事件处理函数的return值默认不会向外传递

你原有代码中，create变量本身就是$('#create').on(...)返回的按钮jQuery对象，后续调用trigger返回的还是这个对象，所以控制台打印的是按钮元素，和你事件处理函数内部的return没有任何关联，原有写法的逻辑本身不可行。

方案1：用外部变量存储创建的元素 #

// 提前声明外部变量用来存储新建的div
let createdDiv = null
const $createBtn = $('#create')

$createBtn.on('click', function(e){
  createdDiv = $('<div class="foo"/>')
  // 如有需要可以在这里执行插入页面等逻辑
  // $('body').append(createdDiv)
})

$createBtn.trigger('click')
const test = createdDiv
console.log(test) // 输出新创建的div元素

方案2：通过事件对象传递返回值 #

如果不想污染外部作用域，可以把结果挂载到自定义事件对象上传递：

const $createBtn = $('#create')
$createBtn.on('click', function(e){
  const content = $('<div class="foo"/>')
  // 将创建的元素挂载到事件对象的自定义属性上
  e.createdContent = content
})

// 手动创建事件对象用来接收返回值
const customEvent = jQuery.Event('click')
$createBtn.trigger(customEvent)

const test = customEvent.createdContent
console.log(test) // 输出新创建的div元素

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