我有一个表单,用户可以在其中创建食谱。我首先从一个成分字段(以及其他字段)开始,然后使用.append()向包含第一个成分的div容器中添加任意数量的内容。第一个输入字段的ID为IngredientName1,动态添加的输入字段为IngredientName2,IngredientName3等。
当他们开始在输入字段中键入内容时,我会弹出一个可用成分列表,该列表将按它们键入IngredientNameX的值进行过滤。当他们单击列表中的成分时,它会将成分名称X字段的值设置为div中的文本-类似于搜索并单击以完成操作。这一切都很好。但是,当您添加IngredientName2(或除我最初使用它们而创建的任何成分之外)时,单击可用成分会设置每个单个IngredientNameX字段的值。不管有多少。
我希望这是足够的上下文,但又不要太冗长,这是我的代码(我删除了很多与发布目的无关的代码,希望我不要删除太多):
<div id="ingredientsContainer">
<input type="hidden" id="ingredientCounter" value="1">
<div class="ingredientsRowContainer">
<div class="ingredientsInputContainer"><input class="effect-1 ingredientsInput" type="text" name="IngredientName1" placeholder="Ingredient" id="IngredientName1" data-ingID="1"><span class="focus-border"></span></div>
</div>
<input type="hidden" name="Ingredient1ID" id="Ingredient1ID">
</div>
<script>
$(document).ready(function(){
$(document).on('keyup', "[id^=IngredientName]",function () {
var value = $(this).val().toLowerCase();
var searchValue = $(this).val();
var valueLength = value.length;
if(valueLength>1){
var theIngredient = $(this).attr("data-ingID");
$("#Ingredients").removeClass("hidden")
var $results = $('#Ingredients').children().filter(function() {
return $(this).text() === searchValue;
});
//user selected an ingredient from the list
$(".ingredientsValues").click(function(){
console.log("theIngredient: "+theIngredient);//LOGS THE CORRECT NUMBER
var selectedIngredientID = $(this).attr("id");
var selectedIngredientText = $(this).text();
$("#IngredientName"+String(theIngredient)).val(selectedIngredientText);//THIS IS WHAT SETS EVERYTHING WITH AN ID OF IngredientNameX
$("#Ingredient"+String(theIngredient)+"ID").val(selectedIngredientID);
$("#Ingredients").addClass("hidden");
});
$("#Ingredients *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
} else {
$("#Ingredients").addClass("hidden")
}
});
$("#AddIngredient").click(function(){
var ingredientCounter = $("#ingredientCounter").val();
ingredientCounter++;
$("#ingredientCounter").val(ingredientCounter);
$('#ingredientsContainer').append('\
<div class="ingredientsRowContainer">\
<div class="ingredientsInputContainer"><input class="effect-1 ingredientsInput" type="text" name="IngredientName'+ingredientCounter+'" placeholder="Ingredient" id="IngredientName'+ingredientCounter+'" data-ingID="'+ingredientCounter+'"><span class="focus-border"></span></div>\
</div>\
<input type="hidden" name="Ingredient'+ingredientCounter+'ID" id="Ingredient'+ingredientCounter+'ID">\
');
});
});
</script>
[UPDATE]我意识到问题正在发生,因为该函数多次运行。我认为发生这种情况是因为我要在一个字段的keyup上调用一个函数,该字段的id以IngredientName开头,所以当一个人发生key up事件时,所有现有字段都将运行该函数。我该如何修改我的
:$(document).on('keyup', "[id^=IngredientName]",function () {
只在有重点的领域上运行?