jQuery - Multiple events to trigger same function but with different elements

Question

jQuery Snippet:

function main_call(){
jQuery("#user_registration").on('submit',function(event) { 
    load_product_serial();
});
jQuery("#reg_submit").on('blur',function(event) {
    load_product_serial(); 
});

}


function load_product_serial(){
        var result = [];
        var prod_serial = jQuery('#reg-product-serial').val(); //fetch input value
        jQuery.ajax({
        type: "GET", 
        url: ajaxurl,
        async: false,
        dataType : "JSON",
        contentType: 'application/json; charset=utf-8',
        data : {action: "get_product_serial"},
        //cache: false, 
            success: function(data){

                result = data;
                if( jQuery.inArray( prod_serial, result ) < 0 ){
                    jQuery( "#invalid_dialog" ).dialog({
                    width: 350,
                    modal: true,
                    resizable: false,
                    dialogClass: 'no-close success-dialog',
                    buttons: {
                      Ok: function() {
                        jQuery( this ).dialog( "close" );
                      }
                    }
                  });
                    jQuery( "button.ui-dialog-titlebar-close" ).hide();//hide close button
                    event.preventDefault();
                    return false;

                }else{
                    alert('Success');
                    //jQuery( "#valid_dialog" ).dialog();
                    return true;
                }
            },
            error: function() {
                alert('Unexpected error occured. Please try again.');
            }
        });    
    //});
}

Here I need to call the function when user clicks on submit button event (reg-product-serial) OR when user changes input value onblur event (reg-product-serial)

I can bind using .on() to multiple events but the element here is not same.

$('#element').on('keyup keypress blur change', function() {
    ...
});

This is not a duplicate as I am not using one common element but two different elements for the same function.

Answer 1

Why dont you try like this?

Wrap the entire code in a function, then call that function from both events.

jQuery('#reg-product-serial').on('blur', function() {
    //call the function from here
});
jQuery("#reg_submit").click(function(event) {
    //call the function from here
});

Answer 2

(Would post as a comment but don't have enough reputation)

Do you call your function 'main_call' to bind your events? Since they are contained inside this function, they won't be binded until you can that function.

The jquery event binding you wrote should work fine other than that.

You should also pass your event variable to your function if you want to use it inside it.

jQuery("#user_registration").on('submit',function(event) { 
    load_product_serial(event);
});

PS: You should use a function in your success callback to make code more readable.

Answer 3

Use more than one line:

$('#element').on('submit',function() { load_product_serial(); });
$('#element2').on('keypress blur change',function() { load_product_serial(); });

Also, FYI, don't use the click event to bind a function to a submit button click when what you really want to do is bind it to the submit event of the form itself.

EDIT

Regarding the comment below about the event not defined error, don't forget to pass in your event object as an argument:

function load_product_serial(event) {
  ....
  event.preventDefault();
  ....
}

$('#element').on('submit',function(e) { load_product_serial(e); });
$('#element2').on('keypress blur change',function(e) { load_product_serial(e); });