设置动态添加的输入字段的值会更改所有输入字段

时间:2019-12-18 00:08:02

标签: javascript jquery html

我有一个表单,用户可以在其中创建食谱。我首先从一个成分字段(以及其他字段)开始,然后使用.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 () {  

只在有重点的领域上运行?

0 个答案:

没有答案