为何点击input#search_form_by_name会触发click事件？技术问询

你遇到的问题核心在于事件委托的写法错误，导致点击表单内的任何元素（包括输入框）都会触发原本只想绑定给搜索按钮的点击事件。

具体来说，你这段代码里的事件绑定：

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

这里的第二个参数如果是jQuery对象（比如btn_search_forms），jQuery的.on()方法并不会按照你预期的“只监听按钮的点击”来处理，反而会把点击事件绑定到整个forms_search表单元素上。当你点击表单内的输入框时，事件会冒泡到表单元素，从而触发这个回调函数。

正确的事件委托写法，第二个参数应该是选择器字符串，而不是已经获取到的jQuery对象；或者更简单的，直接把点击事件绑定到按钮元素本身。

方案1：直接绑定事件到按钮（最直观） #

既然你已经获取了搜索按钮的jQuery对象btn_search_forms，直接给它绑定点击事件即可：

btn_search_forms.on("click", function(ev) {
    ev.preventDefault();
    var archive = !!chk_show_archived.is(":checked");
    alert("You click me");
});

方案2：正确使用事件委托（适合动态添加元素的场景） #

如果后续按钮是动态生成的，需要用事件委托的话，要把第二个参数写成选择器字符串：

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>

<script>
$(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; 
        } 
    }); 

    // 修正后的搜索按钮点击事件
    btn_search_forms.on("click", function(ev) { 
        ev.preventDefault(); 
        var archive = !!chk_show_archived.is(":checked"); 
        alert("You click me"); 
    }); 
}); 
</script>

内容的提问来源于stack exchange，提问作者ReynierPM