JQuery觸發一個按鈕單擊一次

-2

我想構建一個jQuery函數，當單擊一個按鈕時創建七個輸入字段。這應該只允許一次，而不是每次按下按鈕。JQuery觸發一個按鈕單擊一次

目前我有下面的代碼創建一個文本字段，但問題是每次按下按鈕時都會添加更多的文本字段。通過創建這些文本字段，我可以使用它們在我的數據庫中添加記錄。例如，通過單擊addbutton，將創建文本字段並且用戶可以輸入信息。

$("#addbutton").bind("click", function() { 
    var textarea = $('<input type="text" name="firstname">',); 
    $('#textfields').append(textarea); 
});

感謝

來源

2015-12-28 Otonel

好的，那你有什麼問題？ –

讓我們來澄清一下：單擊按鈕，創建七個輸入字段，再次單擊該按鈕不會再創建任何輸入字段。對？ – AGE

簽出'.one'方法只允許一次點擊。 – tymeJV

您可以觸發事件處理程序只與one()一次，只是追加你想要的按鈕，我使用的名稱的數組和$.map創建它們

$("#addbutton").one("click", function() { 

    var buttons = [ 
     'firstname', 
     'lastname', 
     ..... etc 
    ]; 

    $('#textfields').append(
     $.map(buttons, function(_name) { 
      return $('<input />', { name : _name }) 
     }) 
    ); 
});

FIDDLE

來源

2015-12-28 16:18:32 adeneo

如何識別每個文本字段，以便我可以從他們的數據？ – Otonel

通過您給他們的名字來定位他們 – adeneo

var numText=1; 
$("#addbutton").on("click",function(e){ 
     e.preventDefault(); 
     numText++; 
     $('#textfields').append('<input type="text" name="firstname" />'); 
     if (numText==7) 
      $(this).off('click') 

});

來源

2015-12-28 16:20:05 Vixed

再次閱讀問題。 –

根據我們在您的意見聊天，你希望那一個按鈕：

點擊之後，它會創建輸入字段，並且將它們附加到您的#textfields元素。
創建字段後，該按鈕不允許創建更多輸入字段。

我設計了基於這種解釋以下解決方案：

$("#addbutton").click(function(){ 
 
    for(var i = 0; i < 7; ++i){ 
 
    $('#textfields').append('<input type="text" name="firstname">'); 
 
    } 
 
    $(this).prop("disabled", true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="addbutton">Click Me</button> 
 
<div id="textfields"></div>

長話短說，按鈕被首次點擊後，被禁用。這可以防止你或任何人使用按鈕做其他事情。

或者，您可以創建一個全局變量作爲標誌，通過用if語句包裝輸入創建代碼來避免創建更多輸入字段，如下所示： var inputFieldsCreated = false;

$("#addbutton").click(function(){ 
    if(inputFieldsCreated === false){ 
    for(var i = 0; i < 7; ++i){ 
     $('#textfields').append('<input type="text" name="firstname">'); 
    } 
    inputFieldsCreated = true; 
    } 
});

讓我知道如果這在你下面的評論中爲你做的工作。

來源

2015-12-28 16:25:19 AGE

禁用視覺反饋按鈕是一個好主意。 +1 –

沒錯，視覺反饋很重要;-) – AGE

只是因爲我不喜歡使用JQuery這樣輕鬆/簡單/短的事情，這裏是用純JavaScript代碼：

document.getElementById("btn").addEventListener("click", onClick, false); 

function onClick() { 
    var textfield, br; 
    for(var i=0 ; i<7 ; i++) { 
     textfield = document.createElement("input"); 
     br = document.createElement("br"); 
     textfield.id = "txt_"+i; 
     document.getElementById("textFields").appendChild(textfield); 
     document.getElementById("textFields").appendChild(br); 
    } 
    this.parentElement.removeChild(this); 
}

腠可以在這裏進行測試： https://jsfiddle.net/v91v7afa/

當然，而不是刪除按鈕，你可以disable它，但它真的很容易重新啓用它。或者你可以remove the listener。

來源

2015-12-28 16:31:13 Seblor

JQuery觸發一個按鈕單擊一次

回答

相關問題