"Enter"キー機能を有効にするために自分自身を繰り返す必要がありましたが、機能します。私はそれを無効にすることを検討していたが、ユーザーエクスペリエンスを考慮して有効にしたい。現在、JQueryとJQuery UIを搭載したシンプルなリストアプリケーションに取り組んでいます。以下はコードからの抜粋です。このコードを改善または書き直して効率化するにはどうすればよいですか?
var $inputButtonHolder = $('.input-button-holder')
var $userListContainer = $('.user-items-container');//Grab main container which is hard coded
var $sortDivContainer = $('<div class="sorter-container"></div>');
//Event handler attached to button element
$('#add-button').on('click', function(){
var $userInput = $('#add-to-do').val();//Get User Input
function addUserItem(){
var $spanElem = $('<span class="user-input">').append($userInput);//Dynamically generating a span element
var $listOptions = $('<a href="#" class="delete-list">Delete</a>');//Dynamically generating a tag element
//Div element to hold child elements span and a tag - also dynamically generated
var $newDivElem = $('<div>',{
"class": 'user-item',
}).append($spanElem);
//Checkboxes also dynamically generated and appended to newDivElem
var $checkBoxes = $('<input>', { type: 'checkbox', id: 'cb'}).appendTo($newDivElem);
$listOptions.appendTo($newDivElem);//append delete option to user list item
$userListContainer.append($sortDivContainer);//Append user item div which will enable sorting using JQ UI
$sortDivContainer.append($newDivElem); //Here we append user input
$('#add-to-do').val('');
$('.warning-message').hide();
};
//pu
if($userInput==''){
$('.warning-message').fadeIn();
}else {
addUserItem();
};
});
//when user presses the enter key after input
$('#add-to-do').on('keypress', function(e){
if(e.which == 13) {
var $userInput = $('#add-to-do').val();//Get User Input
function addUserItem(){
var $spanElem = $('<span class="user-input">').append($userInput);//Dynamically generating a span element
var $listOptions = $('<a href="#" class="delete-list">Delete</a>');//Dynamically generating a tag element
//Div element to hold child elements span and a tag - also dynamically generated
var $newDivElem = $('<div>',{
"class": 'user-item',
}).append($spanElem);
//Checkboxes also dynamically generated and appended to newDivElem
var $checkBoxes = $('<input>', { type: 'checkbox', id: 'cb'}).appendTo($newDivElem);
$listOptions.appendTo($newDivElem);//append delete option to user list item
$userListContainer.append($sortDivContainer);//Append user item div which will enable sorting using JQ UI
$sortDivContainer.append($newDivElem); //Here we append user input
$('#add-to-do').val('');
$('.warning-message').hide();
};
if($userInput==''){
$('.warning-message').fadeIn();
}else {
addUserItem();
};
e.preventDefault();
}
});
他のスタック交換ネットワークでよりよく適合しているので、この質問を議論の対象外とすることにしました。http://codereview.stackexchange.com/ – DaniP