Javascript 如何为一个函数使用不同元素上的两个事件？

我现在有两个函数，每个函数都从不同的事件开始（

单击

和

模糊

），它们都是在与不同的元素交互时启动的。有没有办法把两者结合起来？因此，当单击该按钮时，该函数将启动，当失去对输入的关注（

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{
 //
 // }
});

---

问题是我的元素是父元素的子元素（

#帐户详细信息

）。如何做到这一点？

使用您找到的答案：

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

---

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

什么是

#帐户详细信息

？因为如果它有

blur

和

input

则表示它是一个表单元素。但是，

$（“#帐户详细信息”）。在（“单击“，”。保存按钮”

表示它是

.save按钮的父项。@MoshFeu
#account details
是表单的id是。我不知道
表单
有
输入
事件。有趣的是。关于你的问题，我猜你的场景是当用户键入输入，然后单击
。save按钮
时
$.ajax
调用了两次，对吗？@MoshFeu是的，这就是目前正在发生的事情。因此，如果调用了两次提交函数，您可能需要某种机制来避免调用提交函数。我的问题是，如果您在
input
上保存表单，为什么仍然需要提交按钮？
$('#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();
    }
});