Question

拥有以下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");
  });
});

<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>

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

Answer 1

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

更改

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

要

forms_search.on("click", '#btn_search_forms', function(ev) {

Answer 2

由于您已经为这些元素创建了单独的变量，您可以通过这种方式调用它：

btn_search_forms.on('click', function(ev){...})

或如上所述，将第二个参数更改为字符串

forms_search.on('click', '#btn_search_forms', function(ev) {...})

Answer 3

＆＃13;

$(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");
    var new_form = $("#btn_new_form");
  forms_search.keypress(function(ev) {
  debugger
    var key = ev.which;
    if (key === 13) {
      btn_search_forms.trigger("click");
      return false;
    }
  });

  forms_search.on("click", btn_search_forms, function(ev) {
  console.log(btn_search_forms);
console.log("#btn_search_forms");
    ev.preventDefault();

    var archive = !!chk_show_archived.is(":checked");

    alert("You click me");
  });
});

＆＃13;

<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>

＆＃13;

问题是.on( events [, selector ] [, data ], handler )问题是选择器这里是一个字符串，用于过滤触发事件的所选元素的后代。如果选择器为null或省略，则事件始终在到达所选元素时触发。

因此，在您的情况下，所选元素是完整的forms_search。所以点击是附加完成，因为匹配选择器它没有任何东西。

我添加了控制台来检查点击事件触发器时btn_search_form的值是多少。看到不同。你正在传递对象，但它需要字符串。

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

3 个答案: