javascript - 如何使用Jquery在用户点击回车键时触发按钮？

Question

I have a

TextBox (id=txtFilterValue),

Add button (id=btnAdd) and

Table (id=queryTable)

once user enter the value in text box, they may press the enter key. So when they press the enter key, it should call the Add Button which is already defined in jquery.

这是我尝试过的

Jquery 代码

    //Preventing ENTER Key
$('#form1').on('keyup keypress', function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
        //$('input[name = btnAdd]').click();
        $("#btnAdd").trigger('click');
        e.preventDefault();
        return false;
    }
});

上面的代码阻止回车键，它会调用添加按钮。

As I thought it's working. But it's calling two times and the values are adding 2 times. It shouldn't add two times.

when I click the Add button directly, it's entering the record only one to my table.

这是我的添加代码按钮

    //Filter Query Add to TABLE and TEXTBOX
$("#btnAdd").click(function () {
    
    var selectedField = $("#FilterField option:selected").text();
    var operator = $("#ddlOperator :selected").val();
    var filterValue = $("#txtFilterValue").val();
    var query;
    var textFilterRecord = $("#txtFilterRecord").val();

    //values seperated by COMMA
    var arrayTxtConditionValue = filterValue.split(',');

    if (operator == 'equalTo') {
        
        if ($("#txtFilterRecord").val().length == 0) {

            //put the single quotation( ' ) in between values
            var filterCommaValue = '';
            for (var i = 0; i < arrayTxtConditionValue.length; i++) {
                if (i == 0) {
                    filterCommaValue = filterCommaValue + "'" + arrayTxtConditionValue[i] + "'";
                }
                else {
                    filterCommaValue = filterCommaValue + ",'" + arrayTxtConditionValue[i] + "'";
                }
            }

            query = selectedField + ' IN(' + filterCommaValue + ') ';
            $("#txtFilterRecord").val($("#txtFilterRecord").val() + query);

            $("#queryTable > tbody:last-child").append('<tr><td class="FieldNameID">' + selectedField + '</td><td class="OperatorID"> IN(' + filterCommaValue + ')</td></tr>');
        }
        else {

            var filterCommaValue = '';
            for (var i = 0; i < arrayTxtConditionValue.length; i++) {
                if (i == 0) {
                    filterCommaValue = filterCommaValue + "'" + arrayTxtConditionValue[i] + "'";
                }
                else {
                    filterCommaValue = filterCommaValue + ",'" + arrayTxtConditionValue[i] + "'";
                }
            }

            var radioButton = $('input[name=group]:checked').val();
            query = radioButton + ' ' + selectedField + ' IN(' + filterCommaValue + ') ';
            $("#txtFilterRecord").val($("#txtFilterRecord").val() + query);

            $('#queryTable > tbody:last-child').append('<tr><td class="FieldNameID">' + radioButton + ' ' + selectedField + '</td><td class="OperatorID"> IN(' + filterCommaValue + ')</td></tr>');
        }
    }
});

Answer 1

$('#form1').on('keyup keypress', function (e) {
    // ...

在这里，您正在监听具有相同回调的两个事件。这意味着每当其中之一发生时，回调就会被调用。由于它们都与关键事件相关(两者几乎相同)，因此回调将被调用两次。

所以只需删除其中一个，如下所示:

$('#form1').on('keypress', function (e) {
    // ...