为什么 Jquery keyup 功能在停止键入并单击正文上的任何位置时自动工作

Question

我正在同时使用 Keyup & change Both 并且它工作正常没有任何问题，但问题只是当用户停止输入并单击页面主体上的任意位置时，ajax 再次运行。

问题出在哪里，请任何人帮助我，下面是我的代码

$(".eventclass").on('keyup change', function (){

    var txt = $('#search_text').val();
    var st = $('input[type=radio]:checked', '.radiostatus').val();
    var act_id = $('.actid').val();
    var child_id = $('.childid').val();

    if(txt != '' || st !='' || act_id !='' || child_id !='')
    {
        $('#maindiv').hide();
        $("#loadi").show();

        if (globalTimeout != null) {
            clearTimeout(globalTimeout);
        }

        globalTimeout = setTimeout(function() {
            globalTimeout = null;
            $.ajax({
                url:"activity_post_load.php",
                method:"post",
                data:{
                    search:txt,
                    status: st,
                    actid: act_id,
                    childid: child_id
                },
                dataType:"text",
                success:function(data)
                {

                    setTimeout(function() {
                        $("#loadi").hide();
                        $('#results').html(data);
                    }, 1000);
                }
            });
        }, 2000);
    }else{
        $('#results').html('');
        $('#maindiv').show();
    }
});

这是页面的HTML以便更好地理解，我正在使用输入和选择

 <div class="row fx-wrap">
    <div class="form-group col-xs-12 col-sm-5 col-md-6">   
    <label class="form-label"> Search Posts</label>  
    <input type="text" name="keysearch" id="search_text" 
    placeholder="Search by sightseeing Name" class="form-control 
    eventclass" placeholder="Search Sightseeing places" />           
    </div>
    <div class="form-group col-xs-12 col-sm-2 col-md-2">
    <label class="form-label"> Act_id </label>
    <select name="act_id" class="form-control actid eventclass"> 
    <option value="">PARENT</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    </select>
    </div>

    <div class="form-group col-xs-12 col-sm-2 col-md-2">
    <label class="form-label"> Child_id </label>

    <select name="child_id" class="form-control childid eventclass"> 
    <option value="">CHILD</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    </select>
    </div>

    <div class="form-group col-xs-12 col-sm-4 col-md-2">
    <div class="radiostatus">
    All <input type="radio" class="status eventclass" name="stat" 
    value="all"><br>
    Status 0 <input type="radio" class="status eventclass" name="stat" 
    value="zero"> <br>
    Status 1 <input type="radio" class="status eventclass" name="stat" 
    value="1">  
    </div>
    </div> 

    </div>

     <div class="table-responsive" id="maindiv"></div>

Answer 1

此行为是由change事件在input （或textarea ）元素上的工作方式引起的。

Mozilla 贡献者解释如下：

根据被更改元素的类型以及用户与元素交互的方式， change事件会在不同的时刻触发：

[...] 4. 当元素在其值更改后失去焦点但未提交时

当您单击页面上的任意位置时会发生这种情况：此时，在input元素中进行的“未提交”更改已提交，并且change事件会触发。

您可以通过侦听input事件而不是change事件来更改此行为。 当你这样做时，你就不需要再听keyup事件了。 所以：

$(".eventclass").on('input', function () {
    // ... rest of code ...
}