javascript - 如何在一个函数的不同元素上使用两个事件？

Question

我现在有两个函数，每个函数都在不同的事件上启动(click 和 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();
    }
});

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