如何附加用戶輸入？ jQuery

我想創建一個待辦事項列表。當我打開HTML文件（我使用谷歌瀏覽器），似乎有兩個問題：如何附加用戶輸入？ jQuery

的按鈕不會顯示爲一個按鈕，它不點擊。
當我按Enter鍵而不是嘗試單擊添加按鈕時，文本就會消失。

但是在這兩種情況下，兩種方法都不會附加用戶輸入。我需要解決什麼問題？

我有以下幾點：

$(document).ready(function() { 
 
    $('#button').click(function() { 
 
    var toAdd = $('input[name=checkListItem]').val(); 
 
    $('.list').append("<div class='item'>" + toAdd + "</div>"); 
 
    }); 
 
});

h2 { 
 
    font-family: arial; 
 
} 
 
form { 
 
    display: inline-block; 
 
} 
 
#button { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 70px; 
 
    background-color: #cc0000; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    color: #ffffff; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    margin-top: 2px; 
 
} 
 
.list { 
 
    font-family: garamond; 
 
    color: #cc0000; 
 
}

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

 
<h2>To Do</h2> 
 
<form name="checkListForm"> 
 
    <input type="text" name="checkListItem" /> 
 
</form> 
 
<div id="button">Add!</div> 
 
<br/> 
 
<div class="list"></div>

來源

2016-02-17 AlanH

可能按鈕不看起來像一個按鈕，因爲它是你的代碼上的'div'。嘗試使用'

該按鈕適用於我。 – Barmar

你爲什麼期望按下按鈕來做任何事情？你沒有這個事件處理程序。 – Barmar

給予一些按鈕的id不使它成爲一個按鈕。也許你應該試試：<button id="button>Add!</button>
當你按回車你提交表單，因爲你沒有任何JavaScript攔截表單onSubmit事件重新加載頁面。

如果你希望發生這個動作，當用戶點擊進入，那麼你應該移到表格內的按鈕和事件更改$('form[name="checkListForm"]').on('submit', ...)

來源

2016-02-17 23:13:34

刪除了，謝謝@ guest271314 –

您可以擴展如何使包括Enter事件嗎？我在追加什麼？ – AlanH

@AlanH請參閱http://codepen.io/anon/pen/obOPaV –

好了，所以我在這裏看到了一些問題。首先一個div不是一個按鈕。我的意思是，你也許可以做造型，使它看起來像一個按鈕，但爲什麼不使用：

<button type="button"> Add </button>

另外，你可以只使用定義該點擊事件的onclick代替。我覺得這是一般清潔劑：

<button type="button" onclick="the_function();"> Add </button>

，然後在JavaScript中定義的函數：

function the_function() 
{ 
    var toAdd = $('input[name=checkListItem]').val(); 
    $('.list').append("<div class='item'>" + toAdd + "</div>"); 
});

不過，你最好把一個ID輸入這樣的：

<input type="text" id="check-list-input" name="checkListItem"/>

顯然你不需要使用該命名約定。

function the_function() 
{ 
    var toAdd = $('#check-list-input').val(); 
    $('.list').append("<div class='item'>" + toAdd + "</div>"); 
});

但還沒有這仍然是不如它應該是：這樣做，那麼你可以修改該功能後。該列表也應該是一個id不是一個類。如果您在頁面上有多個列表，則會導致問題。相反，這樣做：

<div class="list" id="list-div"></div>

然後你就可以修改你的函數：

function the_function() 
{ 
    var toAdd = $('#check-list-input').val(); 
    $('#list-div').append("<div class='item'>" + toAdd + "</div>"); 
});

所以，最終的結果應該是：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>To Do</title> 
     <link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
     <script type="text/javascript" src="script.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    </head> 
    <body> 
     <h2>To Do</h2> 
     <form name="checkListForm"> 
      <input type="text" id="check-list-input" name="checkListItem"/> 
     </form> 
     <button type="button" onclick="the_function();"> Add </button> 
     <br/> 
     <div class="list" id="list-div"></div> 
    </body> 
</html>

，併爲您的jQuery（無需文件準備好了，只需確保在html之前包含javascript文件或片段即可）：

function the_function() 
{ 
    var toAdd = $('#check-list-input').val(); 
    $('#list-div').append("<div class='item'>" + toAdd + "</div>"); 
});

我還沒有測試，但我希望它適合你。

來源

2016-02-17 23:25:10 Macainian

如何附加用戶輸入？ jQuery

回答

相關問題