尝试在输入时触发“点击”不起作用[重复]答案

【问题标题】：attempts to trigger "click" on enter not working [duplicate]尝试在输入时触发“点击”不起作用[重复]
【发布时间】：2020-05-12 16:13:48
【问题描述】：

当我按下回车键时，我试图触发我的按钮点击，以使我的网站更加用户友好。我已经尝试了以下所有方法，所有方法都有相同的错误

这是我的 html（请注意我使用 pug）

input#userInterests.form-control(type='text' placeholder='Interests' name='userInterests')
button#AddInterest.btn.btn-success.btn-block.btn-lg(type='button', onclick='add_interest()', value='interests') Update Interests

这是发帖功能：

function    add_interest() {
    var interests = document.getElementById('userInterests').value;

    interests = interests.split(" ");
    interests.forEach(function (data) {
        if (!validInterest(data))
        {
            swal(
                'Error!',
                `${data} is not a correctly formatted interest`,
                'error'
            )
            return ;
        }
    });
    interests.forEach(function (data) {
        if (validInterest(data))
        {
            let form = 
            {
                interest: data
            }
            $.ajax({
                type: "POST", 
                url : '/user/account/addinterest',
                data: JSON.stringify(form),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
            });
        }
    });
    document.getElementById("interestsPara").innerHTML = "Updated your interests";
    $('#userInterests').val('');
}

这些都是我尝试过的所有方法，但都没有奏效。请注意，我显然不会同时执行所有这些操作，并且每次都取消注释以进行测试。我已经测试了所有这些有和没有 $(document).ready

$(document).ready(function(){
    $("#userInterests").keyup(function(event) {
        if (event.keyCode === 13) {
            $('#AddInterests').trigger("click");
            $('#AddInterests').click(add_interest());
            $("#AddInterests")[0].click();
            $("#AddInterests").click();
            setTimeout(function(){ $('#AddInterests').click()}, 100);
            setTimeout(function(){ $('#AddInterests')[0].click()}, 100);
            add_interest();
            document.getElementById("AddInterests").onclick();
            document.getElementById("AddInterests").onclick = add_interest();
            $('#AddInterests').trigger('click');
            $("#AddInterests")[0].click(add_interest());
        }
    })
});

这是我的“错误”

Cannot POST /user/account

当我手动单击按钮时，我的功能确实可以正常工作并正确发布

（这是一个小组项目，其中一些不是我的，所以请不要太猛烈抨击我并给予建设性的批评）

【问题讨论】：

从你的条件中删除$(document).ready ! 将它移到$("#userInterests")之前
doc.ready inside keyup 什么都不做——如果你在 doc 准备好之后调用 doc.ready，那么内部函数会立即运行。但是，将它移到 keyup 事件处理程序声明之外将有助于确保 #userInterests 在添加处理程序之前存在（假设它没有在文档准备好后动态添加）
看起来你有 just <form><input><button></form> - 如果是这种情况，那么在输入中按 enter 将导致表单发布。您的错误是无法发布到 /user/account 但您的网址是 /user/account/addinterest - 所以它没有调用您的 add_interest 函数（或者是，但没有在那里给出错误）。一些简单的调试/console.log() 会显示发生了什么。要确认，请添加第二个（临时）输入。要解决此问题，请将 return false 添加到输入的 keyup 事件的末尾。
@Pedram 谢谢你，我明白了，我已经更新并尝试过了，但还是不行
@freedomn-m 谢谢！我不知道这个功能是一个东西。禁用它解决了我的问题。我需要进行调试:)

标签： javascript jquery html

【解决方案1】：

谢谢@freedomn-m

问题是输入时提交的默认表单行为，我没有意识到存在。我将我的表单设置为 onsubmit return false 如下，这有效

<form onsubmit="return false;">

如This Post所述

我尝试使用 event.preventDefault() 但它不起作用

【讨论】：