如何在jquery按钮点击之前调用JS函数(通过选择器点击)

How to call a JS function before a jquery button click(click through selector)

本文关键字：函数 选择器 JS jquery 按钮 调用      更新时间：2023-09-26

我想调用一个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提交。

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..
   }
 }

注意:你的函数必须在事件触发器之外

在submit调用中调用验证函数。

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

HTML代码

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

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

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

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

$(document).ready(function(){
    validation(); // function call
    $('#my_form').submit(function(){  //form submit event
    // do something here.
    }
});

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

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

<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>
演示

相关文章：