jquery在单击时创建并返回DOM元素

Question

我有按钮可以在点击时创建一个 div。 当我单击一个按钮时，我想返回这个创建的 div。 但是下面的代码实际上返回了这个按钮。

 var create = $('#create').on('click', function(e){

    var content = $('<div class="foo"/>')
     
    return content

})

var test = create.trigger('click')

 console.log(test)

结果是：

init [div#create, context: document, selector: '#create']

这样做是不可能的，还是我错过了什么？

Answer 1

您正在调用一个变量（“create”），该变量将事件侦听器存储在按钮上。 这是它的样子：

var test = $('#create').on('click', function(e){

    var content = $('<div class="foo"/>')
     
    return content

}).trigger('click')

console.log(test)

这是解决方案：

jQuery

var create = function() {
  return $('<div class="foo"/>');
};
var createEl = $('#create');
createEl.on('click', function() {
  console.log(create());
  // <div class="foo"></div>
});
createEl.trigger("click");

JavaScript

var create = function() {
  var el = document.createElement('div');
  el.className = "foo";
  // Add other attributes if you'd like
  return el;
};
var createEl = document.querySelector('#create');
createEl.addEventListener("click", function() {
  console.log(create());
  // <div class="foo"></div>
});
createEl.click();

(jQuery) 现场示例

 var create = function() { return $('<div class="foo"/>'); }; var createEl = $('#create'); createEl.on('click', function() { console.log(create()); // <div class="foo"></div> });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <button id="create">Create</button>

(JavaScript) 现场示例

var create = function() {
  var el = document.createElement('div');
  el.className = "foo";
  // Add other attributes if you'd like
  return el;
};
var createEl = document.querySelector('#create');
createEl.addEventListener("click", function() {
  console.log(create());
  // <div class="foo"></div>
});
createEl.trigger("click");

 var create = function() { var el = document.createElement('div'); el.className = "foo"; // Add other attributes if you'd like return el; }; var createEl = document.querySelector('#create'); createEl.addEventListener("click", function() { console.log(create()); // <div class="foo"></div> });

 <button id="create">Create</button>

Answer 2

不，这是不可能的。 您可以添加一个将在事件处理程序中执行的函数，以对您在侦听器中创建的对象执行某些操作：

var create = $('#create').on('click', function(e){

    var content = $('<div class="foo"/>')
     
    doSomething(content)

})

create.trigger('click')

function doSomething(test) {
    console.log(test)
}

没有其他方法，这是因为当浏览器触发事件​​（或者您使用.trigger()方法）时，会调用分配给.on()方法的处理程序函数，而 return 语句仅用于强制调用event.stopPropagation()和event.preventDefault()方法（您必须在处理程序中返回false或仅分配false而不是函数作为事件处理程序 - 检查文档，事件处理程序及其环境部分）并且在以下情况下不返回任何值您手动触发事件。

您还可以使用外部变量将“生成”的数据存储在您的事件处理程序中：

const divs = []

var create = $('#create').on('click', function(e){

    var content = $('<div class="foo"/>')
    
    divs.push(content)

    doSomething()

})

create.trigger('click')

function doSomething() {
    console.dir(divs)
}