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


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( ).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 need call 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() multiple events element here not same.

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

this not duplicate not using 1 common element 2 different elements same function.

use more 1 line:

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

also, fyi, don't use click event bind function submit button click when want bind submit event of form itself.

edit

regarding comment below event not defined error, don't forget pass in event object 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); }); 

Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -