Tengo un botón que crea un div al hacer clic. Quiero devolver este div creado cuando hago clic en un botón. Pero el siguiente código en realidad devuelve este botón.
var create = $('#create').on('click', function(e){ var content = $('<div class="foo"/>') return content }) var test = create.trigger('click') console.log(test)El resultado es:
init [div#create, context: document, selector: '#create']¿No es posible hacerlo de esta manera o me estoy perdiendo algo?
Está llamando a una variable ("crear") que almacena el detector de eventos en el botón. Esto es lo que parece:
var test = $('#create').on('click', function(e){ var content = $('<div class="foo"/>') return content }).trigger('click') console.log(test)Esta es la solución:
var create = function() { return $('<div class="foo"/>'); }; var createEl = $('#create'); createEl.on('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> }); createEl.click();(jQuery) Ejemplo en vivo
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) Ejemplo en vivo
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>No, no es posible. Puede agregar una función que se ejecutará en su controlador de eventos para hacer algo con el objeto que crea en el oyente:
var create = $('#create').on('click', function(e){ var content = $('<div class="foo"/>') doSomething(content) }) create.trigger('click') function doSomething(test) { console.log(test) } No hay otra manera y es porque la función del controlador asignada con el método .on() se llama cuando el navegador activa un evento (o usa el método .trigger() ) y la declaración de devolución se usa solo para forzar la llamada event.stopPropagation() y los métodos event.preventDefault() (tiene que devolver false en el controlador o simplemente asignar false en lugar de una función como controlador de eventos; consulte la documentación , sección El controlador de eventos y su entorno ) y no devuelva ningún valor cuando dispara un evento manualmente.
También puede usar una variable externa para almacenar los datos "generados" en su controlador de eventos:
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) }