on change event is not being triggered via ajax php

Question

whenever I enter my househould ID. it would load records and input ID chli_hh_id will be populated also. and if the input #cli_hh_id has been populated. the href=" is not being triggered. kindly help please.. thanks :)

here are my input textboxes.

                    <input type="text" id = "hh_id" name = "hh_id" placeholder="Please enter Household ID" class = "form-control"  href="<?=base_url('location/hh_members')?>">
                <input type="text" id = "cli_hh_id" name = "cli_hh_id" class = "form-control"  href="<?=base_url('location/cli_hh')?>">

Here is my js on the #hh_id. there's no problem here.

    $(document)
.on('change', '#hh_id', function(){

    var hh_id = this.value;
    $.ajax({
        url: $(this).attr('href') + '/' + hh_id,
        dataType: 'json',
        success:function(data){
            console.log(data);
            var html = ""; 
            for (var i = 0; i < data.length; i++) {
                html += "<option  data-cli_hh_id = '"+data[i].cli_hh_id+"' data-entry_id = '"+data[i].entry_id+"' data-my_name = '"+data[i].my_name+"' data-sex = '"+data[i].sex+"' data-brgy = '"+data[i].brgy+"' data-muncity = '"+data[i].muncity+"' data-province = '"+data[i].province+"' data-region = '"+data[i].region+"' value='"+data[i].value+"'>"+data[i].value+"</option>";
            };
            $('#full_name').html(html);
        }
    });
});

This is where i encounter my problem. this is not being triggered when it has a value on it. :(

    $(document)
.on('change', '#cli_hh_id', function(){
alert('Is this loading?');
    var cli_hh_id = this.value;
    $.ajax({
        url: $(this).attr('href') + '/' + cli_hh_id,
        dataType: 'json',
        success:function(data){
            console.log(data);
            var html = ""; 
            for (var i = 0; i < data.length; i++) {
                html += "<p>"+ data[i].key + " " + data[i].value+"</p>";
            };
            $('#cli_household').html(html);
        }
    });
});

Answer 1

Change the line as mentioned below [Not mandatory]

$('#hh_id').change(function() { ... });

$('#cli_hh_id').change(function() { ... });

However, this event will only fire when the selector has lost focus, so you will need to click somewhere else to trigger that function.

Alternatively you can use other jQuery events like keyup, keydown or keypress - depending on the exact effect you want.