使用 Jquery 添加和删除输入字段后计算输入字段

Posted 2023-02-25

【中文标题】使用 Jquery 添加和删除输入字段后计算输入字段

【英文标题】：Count input fields after adding and removing it with Jquery

【发布时间】：2014-09-28 19:43:02

【问题描述】：

eOk 我使用此代码添加和删除输入字段，但输入字段的最大数量未正确计算，问题出在此行 $('.remove_field').click( function(e) 。当我调用此行时href 标记所有具有相同名称的类，因此 x-- 递减的次数超过 1，例如，如果我有 4 个输入，x 将被计算为 x-4。如何以简单的方式解决此问题。

$('document').ready(function()
        
           var max = 5;
           var x = 1;

            $('#add').click(function(e)
              
                if(x < max)
                
                    $('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');
                    x++;
            

            $('.remove_field').click( function(e)
               
                e.preventDefault();
                $(this).parent('div').remove();
             x--;

            )

            );
        );

我试过这样的东西

 $(#inp).on('click','.remove_field',function(e))

但这对我不起作用？？？有什么解决办法吗？

【参考方案1】：

我没有对其进行测试，但仅通过查看，我可以看到您的 if (x < max) 语句中缺少 （x++; 之后的右括号）

【参考方案2】：

试试这个：

<script>
$('document').ready(function()
        
           var max = 5;
           var x = 1;

            $('#add').click(function(e)
              
                if(x < max)
                
                    $('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');
                    x++;
            
            );
            $('.remove_field').click( function(e)
               
                e.preventDefault();
                $(this).parent('div').remove();
             x--;

            );

            $('body').on('click','.remove_field',function(e)

                $('div#inp')[0].childNodes[max-1].remove();
max = max-1;
);
        );
</script>

<button class="remove_field">remove</button>
<button id="add">add</button>
<div id="inp">
</div>

但在这里我会在每次点击删除时删除最后一个字段。

【参考方案3】：

您在以下语句中使用 div 标签而不是 end div 标签：

$('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');

应该是：

$('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a></div><br/>');

【参考方案4】：

发生的情况是，每次单击#add 时，您都会向所有现有输入添加一个额外的事件处理程序。因此，您可以对 remove_field 类进行查询，但只查询最后一个。

$('.remove_field').last()

JS 小提琴：http://jsfiddle.net/timctran/j2oftq6v/

<div id="add">Click to Add an Input</div>
<div id="inp"></div>

<script>
var max = 5;
var x = 0;

$('#add').click(function()  
    if (x<5) 
        $('#inp').append(' \
            <div> \
                <input class="new_input" type=text name="name"/> \
                <a class="remove_field" href="#"> X </a> \
            </div> \
        ');
        x++;
        $('.remove_field').last().click( function(e) 
            $(this).parent('div').remove();
            x--;
        );
    
);
</script>