Как использовать два события на разных элементах для одной функции?

Question

Теперь у меня есть две функции, каждая из которых запускается в отдельном событии (click и blur), и обе запускаются при взаимодействии с различными элементами. Есть ли способ объединить два? Таким образом, при нажатии кнопки срабатывает функция и при потере фокуса на входе (blur) та же функция запускается без отправки вызова ajax дважды ? Поэтому нажатие на ввод не должно запускать функцию, только нажатие кнопки.

Это мои функции такими, какие они есть сейчас:

$("#account-details").on("click",".save-button",function(e){
    e.preventDefault();
    // if($('#registerform')[0].reportValidity()){
        accountform = $(".account-form").serialize();
        $.ajax({
         type:'post',
         url:"includes/updateaccount.php",
         data:({accountform: accountform}),
         success:function(data){
             var obj = JSON.parse(data);

             for (var i = 0; i < obj.length; i++) {
                 var status = obj[i].status;
                 var field = obj[i].field;
                 if(status == 'error'){
                     var message = obj[i].message;
                        $( 'input[name="' + field + '"]' ).addClass('invalid-input');

                        var errorveld = $( 'input[name="' + field + '"]' );
                        $( 'input[name="' + field + '"] + div').remove();
                        errorveld.after('<div class="inputerror">' + message + '</div>');
                 }else if(status == 'success'){
                     $( 'input[name="' + field + '"] + div').remove();
                     $( 'input[name="' + field + '"]' ).removeClass('invalid-input');
                 }
             }
         }
     });
 // }else{
 //
 // }
});


$("#account-details").on("blur","input",function(e){
    e.preventDefault();
    // if($('#registerform')[0].reportValidity()){
        accountform = $(".account-form").serialize();
        $.ajax({
         type:'post',
         url:"includes/updateaccount.php",
         data:({accountform: accountform}),
         success:function(data){
             var obj = JSON.parse(data);

             for (var i = 0; i < obj.length; i++) {
                 var status = obj[i].status;
                 var field = obj[i].field;
                 if(status == 'error'){
                     var message = obj[i].message;
                        $( 'input[name="' + field + '"]' ).addClass('invalid-input');

                        var errorveld = $( 'input[name="' + field + '"]' );
                        $( 'input[name="' + field + '"] + div').remove();
                        errorveld.after('<div class="inputerror">' + message + '</div>');
                 }else if(status == 'success'){
                     $( 'input[name="' + field + '"] + div').remove();
                     $( 'input[name="' + field + '"]' ).removeClass('invalid-input');
                 }
             }
         }
     });
 // }else{
 //
 // }
});

Я нашел другой вопрос с этим ответом:

$('#element1, #element2').on('click change', function(event){
    var $this = $(this);
    if (($this.is('#element1') && event.type === 'change') ||  ($this.is('#element2') && event.type === 'click')) {
        myFunction();
    }
});

Проблема в том, что мои элементы являются дочерними элементами родителя (#account-details). Как это можно сделать?

Answer 1

Используя найденный ответ:

$('#account-details .save-button, #account-details input').on('click blur', function(event){
    var $this = $(this);
    if (($this.is('#account-details input') && event.type === 'blur') ||  ($this.is('#account-details .save-button') && event.type === 'click')) {
        myFunction();
    }
});

Я надеюсь, что это решение, которое вы ищете