如何在单击 jquery 按钮之前调用 JS 函数（单击选择器）答案

【问题标题】：How to call a JS function before a jquery button click(click through selector)如何在单击 jquery 按钮之前调用 JS 函数（单击选择器）
【发布时间】：2015-11-26 06:32:01
【问题描述】：

我想在点击按钮时调用一个JS函数，然后继续执行下面的jquery脚本

表格：

<form id="my_form">
  <button type="button" id="Bshift" onclick="validation()">Clear</button>
</form>

纯JS函数：

function validation(){
    // this has to be executed  first
    // do something here..
}

Jquery：

$(document).ready(function(){
    $('#Bshift').submit(function(){
    // this has to be executed  second
    // do something here.
    }
});

我想知道在我的 jquery 提交之前我是如何执行我的函数的。

【问题讨论】：

这是一个非常常见的错误。您想将 function validation 分配给您的点击处理程序。相反，您要做的是通过将函数执行validation() 分配给onclick 处理程序来分配该函数的执行返回。
我想你很困惑。在 jquery 中。
查看此演示链接jsfiddle.net/oaefktpb/4

标签： javascript jquery forms button

【解决方案1】：

已编辑代码，请测试我的代码。

<script>
function validation(){
    alert('How are you?');
}

$(document).ready(function(){
     $('#Bshift').click(function(){
         validation(); 
         alert('Fine and you?');           
     });
 });
</script>

<form id="my_form">
<button type="button" id="Bshift">Clear</button>
</form>

Demo

【讨论】：

【解决方案2】：

在表单提交事件上调用验证函数

$(document).ready(function(){
    validation(); // function call

    $('#my_form').submit(function(){  //form submit event
    // do something here.
    }

});


function validation(){
 // do something here..
}

【讨论】：

【解决方案3】：

HTML：

  <form id="my_form">
    <button type="button" id="Bshift">Clear</button>
  </form>

JS：

$(document).ready(function(){
   $('#Bshift').on('click', function(){ // I think this should be click event because you're not submitting your page you're just clearing it based on "CLEAR"
     validation();
   }

   function validation(){
    do something here..
   }
 }

注意：您的函数必须在事件触发器之外。

【讨论】：

【解决方案4】：

您还有一个选择，可以在验证后通过 ajax 提交表单。

$('my_form').on('submit', function(e) {
    e.preventDefault();
    if (validation()){
        $.ajax({...});
    }
});

【讨论】：

【解决方案5】：

在提交调用中调用您的验证函数。

$(document).ready(function(){

        $('#Bshift').submit(function(){
        validation()
        do something here.
        }
    }

HTML 代码

<button type="button" id="Bshift" >Clear</button>

【讨论】：