用戶單擊使用Jquery的Enter鍵時如何觸發按鈕？

Question

我有一個

文字框（id = txtFilterValue），

添加按鈕（id = btnAdd）和

表格（id = queryTable）

用戶在文本框中輸入值后，可以按Enter鍵 。 因此，當他們按下Enter鍵時，它應該調用jquery中已經定義的Add Button 。

這就是我嘗試過的

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

上面的代碼可以防止Enter鍵，它將調用Add Button 。

正如我認為的那樣。 但是它調用了兩次，值相加了2次 。 它不應相加兩次。

當我直接單擊“添加”按鈕時，它僅將一條記錄輸入到我的表中。

這是我的按鈕添加代碼

    //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) {
    // ...