为什么停止键入时会自动工作并单击身体上的任何位置

Question

我正在使用Keyup＆amp;将同时更改在一起，而且效果很好，没有任何问题，但是仅当用户停止键入并单击页面主体上的任何地方时，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

此行为是由更改事件在输入（或textarea）元素上工作的原因。

Mozilla贡献者解释了以下内容。

取决于要更改的元素类型以及用户与元素交互的方式，更改事件在另一个时刻触发：

[...]
4。当元素更改其价值后失去焦点时，但不承诺

这就是您在页面上单击任何地方时发生的事情：此刻，“不承担”更改，这是在input中进行的。元素是指的，并且更改事件触发。

您可以通过收听输入事件而不是更改事件来更改此行为。而且，当您这样做时，您无需再收听键事件了。所以：

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