javascript - 使用 jQuery click 进行不受控制的多表单提交

Question

用户有一些列表（确切的列表，但不是重点）。用户可以添加以列出其他一些独特的元素 - 字符串。允许提交新元素的表单被隐藏。要添加新的用户，请按“显示添加水果表单”按钮，表单出现，获取字符串，如果字符串唯一，则将其推送到字符串，如果不是 - 警报消息。

问题是：

• 首先添加所有工作正常。
• 在第二个和下一个添加如果：
• • 字符串唯一 - 字符串推送到数组并警告有关字符串不唯一的消息
• • 字符串不唯一 - 关于字符串不唯一的多个一一警报消息

html:

<div id="plus_tab">Show Add Fruit Form</div>

<div id="div_form" class="hidden">
    <form id="my_form" >
        <input type="text" name="value1"/>
        <input type="submit" value="Add fruit"/>
    </form>
</div>

<div id="result">
    result
</div>

js：

var fruits = ['apple', 'strawberries']

$('#plus_tab').click(function(){
    $("#div_form").removeClass('hidden').addClass('visible')
    $("#my_form").submit(function(event){
        event.preventDefault()
        new_fruit  = $(this).find('input[name="value1"]').val()
        if ($.inArray(new_fruit, fruits)==-1 ){
            fruits.push(new_fruit);
            $('#result').empty().append(fruits);
            $("#div_form").removeClass('visible').addClass('hidden');
        }else {
            alert('Name '+new_fruit+' exist, choose other')
        }
    })
})

CSS：

.hidden {
    display: none;
}
.visible {
    display: block;
}

Answer 1

使用您的代码，您将在submit每次单击时添加一个额外的处理程序#plus_tab

submit处理程序应该只绑定一次：

$("#my_form").submit(function(event){
    event.preventDefault()
    new_fruit  = $(this).find('input[name="value1"]').val()
    if ($.inArray(new_fruit, fruits)==-1 ){
        fruits.push(new_fruit);
        $('#result').empty().append(fruits);
        $("#div_form").removeClass('visible').addClass('hidden');
    }else {
        alert('Name '+new_fruit+' exist, choose other')
    }
})

$('#plus_tab').click(function(){
    $("#div_form").removeClass('hidden').addClass('visible');
})