Question

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

问题是：

首先添加所有作品。
在第二个和下一个添加if：
- 字符串唯一 - 字符串推送到数组和关于字符串不是唯一的警告消息
- 字符串不唯一 - 多个逐个警告关于字符串不唯一的消息

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');
})

使用jQuery单击提供不受控制的多表单提交

1 个答案: