Javascript 正在尝试使用jQuery打印用户输入

我的系统中有一个部分，允许用户输入配料，然后当他们单击“实时预览”时，每个配料都以纯文本打印出来，这样他们就可以使用jQuery检查拼写。但是，它将只打印第一个元素，而不打印后面的元素。有人知道为什么吗？这是小提琴

HTML

成分

克
盎司
英镑

用于实时预览的HTML

 <div id="toPopup">
                <div class="close">&times;</div> <span class="ecs_tooltip">End Preview<span class="arrow"></span></span>
                <div id="live-preview-display">
                    <div id="lp-name"></div>
                    <div id="lp-ingredientslist">
                        <h3>Ingredients</h3>
                    </div>
                    <div id="lp-step">
                        <h3>Method</h3>
                    </div>
                </div>
            </div>
            <div class="loader"></div>
            <div id="backgroundPopup"></div>

&时代；结束预览
成分
方法

jQuery

$(".ingredient").on('blur change focus', function () {
            $('.ingredient p').each(function () {
                var i = $('.ingredient p').size(),
                    el = $(this);
                if ($('#lp-ingredientslist .ingredient_' + i).length == 0) {
                    $("#lp-ingredientslist").append('<span class="ingredient_' + i + '"></span>');
                }
                var ingredient = el.find('input[name="ingredient[]"]').val(),
                    quantity = el.find('input[name="quantity[]"]').val(),
                    quantityType = el.find('select[name="quantityType[]"]').val(),
                    alternative = el.find('input[name="alternative[]"]').val();
                if (!quantity || !ingredient)
                    return;
                var alt = '';
                if (alternative.length >= 0) {
                    alt = ' (you can also use ' + alternative + ')';
                }
                $('#lp-ingredientslist .ingredient_' + i).html(i + '. ' + quantity + ' ' + quantityType + ' of ' + ingredient + alt + '</br></br> ');
            });
        });

$（“.component”）.on（'blur change focus'，函数（）{
$（'.p'）。每个（函数（）{
变量i=$（'.p'）.size（），
el=$（本）；
如果（$（'#lp ingredientslist.component.'+i）.length==0）{
$（“#lp ingredientslist”）。追加（“”）；
}
var component=el.find（'input[name=“component[]”]）.val（），
quantity=el.find（'input[name=“quantity[]”]）.val（），
quantityType=el.find（'select[name=“quantityType[]”]）.val（），
alternative=el.find（'input[name=“alternative[]”]）.val（）；
如果（！数量| |！成分）
返回；
var-alt=''；
如果（可选长度>=0）{
alt='（也可以使用“+alternative+”）；
}
$（'lp ingredientslist.component'i）.html（i+'.+quantity+'.+quantity+'.+quantityType+'of'+component+alt+'
'）；
});
});

jQuery添加一个成分

$('.recipe-ingredients #addNewIngredient').on('click', function () {
            var i = $('.recipe-ingredients .ingredient').size() + 1;
            $('<div class="ingredient pure-u-1 clearfix"><input type="text" id="ingredient_' + i + '" name="ingredient[]" placeholder="Chocolate"  class="element pure-u-6-24" /><input type="text" id="quantity_' + i + '" name="quantity[]" value="" placeholder="Quantity"  class="element pure-u-4-24" /><select id="selectQuantity_1" name="quantityType[]"  class="element pure-u-3-24"><option value="grams">Grams</option><option value="ounces">Ounces</option><option value="Pounds">Pounds</option></select><input type="text" id="alternative_' + i + '" name="alternative[]" value="" placeholder="Alternative Ingredient"  class="element pure-u-6-24" /><input type="text" id="addedQuantiy_' + i + '" name="addedQuantity[]" value="" placeholder="Quantity per extra person"  class="element pure-u-4-24" /><a href="javascript:void(0)" class="remove" title="Remove">&times;</a></div>').appendTo($('.recipe-ingredients .ingredients'));

$（'.recipe components#addnewcomponent'）。在（'click'，函数（）{
变量i=$（'.recipe-components.component'）.size（）+1；
$（'gramsouncespunds'）。追加（$（'.recipe-components.components'））；

---

谢谢！

不完美需要改进

这条线需要更换为

$('.ingredients').on('blur change focus', function () {

动态添加

.components

类时，更改将显示在

.components

中

---

更新
值得称赞的是@WASasquatch指出了这一点

---

希望它能帮上忙！！

需要一把小提琴…甚至分享

添加配料的代码

我试着做了一把小提琴，但它不起作用：（看起来不错，但我确实注意到OPs原始代码有一些问题。例如，输入5磅莴苣会导致1.5磅莴苣。可能想指出这一点。@WASasquatch我没有注意到它…谢谢…更新。。！！

$(".ingredient").on('blur change focus', function () {

$('.ingredients').on('blur change focus', function () {