簡體   English   中英

jquery在單擊時創建並返回DOM元素

[英]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)

這是解決方案:

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>

不,這是不可能的。 您可以添加一個將在事件處理程序中執行的函數,以對您在偵聽器中創建的對象執行某些操作:

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM