Change "on" to "click" in Javascript function

Question

I want when I click on the radios to call the function, currently this way.

$("input[name='txtCategoria']").on('blur', function(){
    var txtCategoria = $(this).val();
    $.get('buscar_tipos.php?txtCategoria=' + txtCategoria,function(data){
        $('#tipos').html(data);
    });
});

However only when I click on the radio and click on another part of the page that appears the query, I wanted that when it clicks it is already executed, I tried so.

$("input[name='txtCategoria']").on("click", function(){
    var txtCategoria = $(this).val();
    $.get('buscar_tipos.php?txtCategoria=' + txtCategoria,function(data){
        $('#tipos').html(data);
    });
});

But it didn’t work, someone could help me?

Answer 1

blur that is to say "when the element loses focus". This is what happens when you click outside of this element, and the function runs. Because it "lost focus".

The most semantic would be to use the change, which is when the input change value. So, even for those who navigate and change input with the keyboard, the logic will work.

$("input[name='txtCategoria']").on("change", function() {
  $.get('buscar_tipos.php?txtCategoria=' + this.value, function(data) {
    $('#tipos').html(data);
  });
});