Предотвращение запуска JQuery .click событие, нажав ввести

Question

$(document).ready(function() { 
    $(".plus").click(function(e) { 
    e.preventDefault(); 

    //add input box 
    $(".list").append('<div class="item"><select name=selection[]>...select options here...</select><a href="#" class="Remove">remove</a></div>'); 
    }); 

    //user click on remove text 
    $(".list").on("click", ".remove", function(e) { 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    }); 
}); 

HTML:

<form method="post" action="search.php"> 
    <div> 
    <button class="plus">+</button> 
    </div> 

    <div class="list"></div> 

    <div> 
    <input type="text" name="txt"> 
    </div> 

    <div> 
    <input type="submit" name="submit" value="Submit"> 
    </div> 
</form> 

Этот код используется для добавления (нажмите кнопку .plus)/удалить (нажмите .remove ссылку) строк полей выбора в динамичной формы и работает безупречно. Форма также содержит поле ввода поиска (name = "txt"), которое не является частью класса .list. Если я набираю материал в этом поле ввода и нажимаю Enter (который должен отправить форму), по-видимому, это обрабатывается как событие щелчка кнопки .plus, а новая строка добавляется вместо отправки формы. Если я отправлю форму с помощью мыши, все будет в порядке. Любые идеи, пожалуйста?

Answer 1

Ваша форма обрабатывает кнопку .plus как кнопку отправки, потому что у нее нет типа (действие по умолчанию для формы). Однако вы вызвали event.preventDefault(), чтобы форма не была отправлена, но вместо этого добавлена ​​ваша строка.

Существует несколько способов предотвратить это; одним из способов является просто добавить type="button" к вашей первой кнопке, чтобы отличить ее от типа submit.

<button class="plus" type="button">+</button>