如何在一个功能的不同元素上使用两个事件？

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();
    }
});

我希望这是您正在寻找的解决方案