Why Jquery keyup Function Automatically work When Stop Typing and Click Anywhere on Body

Question

I am using Keyup & change Both together and It's working fine without any issue, But the issue only is when the user stops typing and click anywhere on the body of the page ajax runs again.

Where is the problem, Anybody help me please, below is My Code

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

Here is HTML of Page for a better understanding, I am using input and select together

 <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

This behaviour is caused by how the change event works on an input (or textarea ) element.

Mozilla Contributors explain it as follows :

Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:

[...] 4. When the element loses focus after its value was changed, but not committed

This is what happens when you click anywhere on the page: at that moment the "uncommitted" change, that was made in the input element, is committed, and the change event fires.

You can change this behaviour by listening to the input event instead of the change event. And when you do that, you don't need to listen to the keyup event anymore. So:

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