[英]jquery create and return DOM element on click
我有按鈕可以在點擊時創建一個 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']
這樣做是不可能的,還是我錯過了什么?
您正在調用一個變量(“create”),該變量將事件偵聽器存儲在按鈕上。 這是它的樣子:
var test = $('#create').on('click', function(e){
var content = $('<div class="foo"/>')
return content
}).trigger('click')
console.log(test)
這是解決方案:
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) 現場示例
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>
不,這是不可能的。 您可以添加一個將在事件處理程序中執行的函數,以對您在偵聽器中創建的對象執行某些操作:
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)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.