ボタンが実行されていない空の入力フィールドを持つ機能

Question

ボタンをクリックすると、ユーザが入力フィールドの下に入力したものがすべて追加されます。空のフィールドをクリックしても何も追加されません（本質的に関数は実行されません）。ここで

は私のコードです：

var ingrCount = 0 

$("#addIngrButton").on('click', function() { 
var ingredientInput = $("#ingredients").val().trim(); 
var ingredientSpace = $("<p>"); 
ingredientSpace.attr("id", "ingredient-" + ingrCount); 
ingredientSpace.append(" " + ingredientInput); 

var ingrClose = $("<button>"); 

ingrClose.attr("data-ingr", ingrCount); 
ingrClose.addClass("deleteBox"); 
ingrClose.append("✖︎"); 

// Append the button to the to do item 
ingredientSpace = ingredientSpace.prepend(ingrClose); 

// Add the button and ingredient to the div 
$("#listOfIngr").append(ingredientSpace); 

// Clear the textbox when done 
$("#ingredients").val(""); 

// Add to the ingredient list 
ingrCount++; 

if (ingredientInput === "") { 

} 
}); 

だから私は入力が空白の場合、関数が実行されないと言ってif文を作りたかったのです。私はそれをクリック機能から外す必要があるかもしれないと思う。 ifステートメントの場合、無効な属性を追加して、入力ボックスに何かが含まれているときにそれを削除しました。しかし、それはボタンを別の色に変え、私が望む機能ではありません。私が試してみることができるアイデアは助けになります。それ以上の情報が必要な場合はお尋ねください。

Answer 1

は単純に使用します。

$("#addIngrButton").on('click', function() { 
    var ingredientInput = $("#ingredients").val().trim(); 
    if (ingredientInput.length == 0) { 
     return false; 
    } 
    // ..... your code 

Answer 2

ingredientInputが空の場合は、テストしている場合は、あなただけのクリックイベント内から戻ることができますか？

$("#addIngrButton").on('click', function() { 
    var ingredientInput = $("#ingredients").val().trim(); 
    if(ingredientInput === '') { return; } 
    // rest of code