当Jquery onclick函数只运行一次时，它会重复自身

Question

我正在尝试将上一页和下一页按钮添加到网页，但是当我点击下一页按钮时，它会向前跳3页。我添加了一个警报，以便我可以看到发生了什么，并且页码增加了3倍;在加载新页面之前，警报会连续弹出3次，并且每次警报框中的页码都会增加。

$(".nextPage").on("click", function (event) {
    var page = parseInt($(".page-num").val());
    page++;
    alert(page);
    $(".page-num").val(page);
    $(".submit-search").click();
});

以下是我的页面按钮：

<button type="button" class="prevPage"> < </button>
<button type="button" class="nextPage"> > </button>

这是要更新的字段（它是该类的唯一项目）：

@Html.TextBoxFor(m => m.PageNum, new{@class = "page-num"})

为什么函数将page-num.val增加3次而不是像它应该的那样增加一次？