为什么在我点击输入框后立即触发事件?

Rey*_*rPM 1 javascript jquery

拥有以下HTML/jQuery代码:

$(function() {
  "use strict";

  var manage_form_listing_grid = $("#manage_form_listing"),
    forms_search = $("#forms_search"),
    btn_search_forms = $("#btn_search_forms"),
    chk_show_archived = $("#show_archived"),
    inp_search_form_by_name = $("#search_form_by_name");

  forms_search.keypress(function(ev) {
    var key = ev.which;
    if (key === 13) {
      btn_search_forms.trigger("click");
      return false;
    }
  });

  forms_search.on("click", btn_search_forms, function(ev) {
    ev.preventDefault();

    var archive = !!chk_show_archived.is(":checked");

    alert("You click me");
  });
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Search form</h3>
      </div>
      <div class="panel-body">
        <form class="form-inline" id="forms_search">
          <div class="form-group col-md-5">
            <input type="text" name="search_form_by_name" id="search_form_by_name" class="form-control input-full-width">
          </div>
          <div class="checkbox">
            <label>
                  <input type="checkbox" id="show_archived" name="show_archived" value="1"> Show archived?
                </label>
          </div>
          <button type="button" class="btn btn-default" id="btn_search_forms">
                <i class="fa fa-search" aria-hidden="true"></i> Search
              </button>
          <button type="button" class="btn btn-default" id="btn_new_form">
                <i class="fa fa-plus-circle" aria-hidden="true"></i> New Form
              </button>
        </form>
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

为什么点击事件会在我点击后立即触发input#search_form_by_name?我在这里缺少什么?我希望单击该按钮将触发事件,但不会触发输入上的click事件.这是jsFiddle

cha*_*tfl 6

委托的目标on()需要是一个选择器字符串,而不是jQuery对象

更改

forms_search.on("click", btn_search_forms, function(ev) {
Run Code Online (Sandbox Code Playgroud)

forms_search.on("click", '#btn_search_forms', function(ev) {
Run Code Online (Sandbox Code Playgroud)