โดยปกติ event ของ jQuery จะทำงานตามลำดับที่มันโดน bind เอาไว้ ถ้าต้องการให้ทำบาง event ทำก่อน จะบอกว่า “ขอลุงก่อน” ไม่ได้ ต้องเขียนให้ bind ก่อน แต่ถ้าเป็น cms หรือเป็น code ที่โดยระบบใส่ให้เองก็ต้องใช้มาตรา 44 หรือลูกเล่นกันนิดหนึ่ง
คำถามนี้มีคนถามและตอบไว้ที่ jQuery event handlers always execute in order they were bound – any way around this? [duplicate] และเขียนตัวอย่างไว้ให้แล้ว http://jsfiddle.net/x8Na8/2/ งานก็เลยทำง่ายเลย ctrl+c ctrl+v เค้ามาแต่งให้หล่อหน่อยก็เอาไปใช้ได้เลย ขอขอบคุณคร๊าบบ
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery: Events Queue</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>พร้อมเพย์ (PromptPay)</h1>
<form action="values.php" class="form-horizontal" id="formA" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">โอนเงินด้วย</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input checked name="way" type="radio" value="socialid"> หมายเลขบัตรประชาชน
</label>
</div>
<div class="radio">
<label>
<input name="way" type="radio" value="phone"> หมายเลขโทรศัพท์
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="socialidI">หมายเลขบัตรประชาชน</label>
<div class="col-sm-10">
<input class="form-control" id="socialidI" maxlength="13" name="socialid" placeholder="หมายเลขบัตรประชาชน" type="number">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="phoneI">หมายเลขโทรศัพท์</label>
<div class="col-sm-10">
<input class="form-control" id="phoneI" maxlength="11" name="phone" placeholder="หมายเลขโทรศัพท์" type="tel">
</div>
</div>
<div class="form-group">
<label for="amount" class="col-sm-2 control-label">จำนวนเงิน</label>
<div class="col-sm-10">
<div class="input-group">
<input class="form-control" id="amount" max="5000" min="0" name="amount" placeholder="จำนวนเงิน" type="number">
<div class="input-group-addon">฿</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 text-right">
<button type="submit" class="btn btn-success">โอนเงิน</button>
</div>
</div>
</form>
<div class="col-sm-12" id="resultA"></div>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script>
$.fn.bindFirst = function (name, fn) {
// bind as you normally would
// don't want to miss out on any jQuery magic
this.on(name, fn);
// Thanks to a comment by @Martin, adding support for
// namespaced events too.
this.each(function () {
var handlers = $._data(this, 'events')[name.split('.')[0]];
// take out the handler we just inserted from the end
var handler = handlers.pop();
// move it at the beginning
handlers.splice(0, 0, handler);
});
};
</script>
<script>
$(function () {
$('#formA').submit(function () {
alert('1');
return true;
});
$('#formA').submit(function () {
alert('2');
return true;
});
$('#formA').submit(function () {
alert('3');
return true;
});
$('#formA').bindFirst('submit', function () { alert('4'); });
});
</script>
</body>
</html>
About the author