jQuery：從單擊事件返回

Question

我在jQuery中編寫了一個簡單的函數，它創建一個提供文本輸入框和按鈕的界面。當我點擊按鈕時，函數應該返回文本框的值。我知道我不能在click函數中使用return命令，因爲它是一個不同的範圍。所以我的問題是，如何通過單擊函數中的按鈕來返回文本框的值。我的代碼如下所示：

function createInterface() { 
    var text = $(document.createElement('textarea')) 
    .css({ 
     width: "300px", 
     height: "100px", 
    }) 
    .appendTo($(document.body)); 

    var btn = $(document.createElement('button')) 
    .text("click") 
    .click(function() { 
     // this doesn't work 
     return text.val(); 
    }) 
    .appendTo($(document.body)); 
} 

謝謝你，祝你有美好的一天。

Answer 1

您不會真的從事件處理函數返回，您會捕獲事件處理函數中的內部的valye ，並對其執行任何操作。

function createInterface() { 
 
    var text = $('<textarea />', { 
 
     css: { 
 
      width: "300px", 
 
      height: "100px", 
 
     } 
 
    }).appendTo('body'); 
 

 
    var btn = $('<button />', { 
 
     text: 'click', 
 
     click: function() { 
 
      $('body').append('<br>' + text.val()); 
 
     } 
 
    }).appendTo('body') 
 
} 
 

 
createInterface();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

function createInterface() { 
var text = $(document.createElement('textarea')) 
.css({ 
    width: "300px", 
    height: "100px", 
}) 
.appendTo($(document.body)); 

var btn = $(document.createElement('button')) 
.text("click") 
.click(function() { 
    // this work 
    return $(this).val(); 
}) 
.appendTo($(document.body)); 
} 

--update--

對不起，我讓misunderstand.The代碼被修改。 Code18/4

function createInterface() { 
var text = $(document.createElement('textarea')) 
.attr("id", "whatyouwant") 
.css({ 
    width: "300px", 
    height: "100px", 
}) 
.appendTo($(document.body)); 

var btn = $(document.createElement('button')) 
.text("click") 
.on("click",()=> { 
    // this work 
    console.log($("#whatyouwant").val()) 
    return $("#whatyouwant").val(); 
}) 
.appendTo($(document.body)); 
} 
createInterface();