onchangeイベントはonmousedownイベント後に発生しますか？

Question

jquery & ajaxを使用してフォーム要素を動的に生成しています。 したがって、私のコードは要素を生成し、すべて正常に動作します。

今私は値が変更されてフォーカスを外して発生する各テキストボックスにonchangeイベントがあります。

また、私はフォームデータを投稿するonmousedownイベントを持つ保存ボタンを持っています。私が使用しています

コード： （HTMLコード）

<div id="form"> 
<input type="text" class="vchange"/> 
<input type="text" class="vchange"/> 

<a href="#" class="btn btn-success vsubmit" onmousedown="return false;">Submit</a> 
</div> 
<script> 
$(document).ready(function(){ 
$('#form').on('change', '.vchange input[type=text]', function() { 
//ajax post back code to save textbox data in database. 
}); 
$('#form').on('mousedown', '.vsubmit', function() { 
$("#form").change(); //updated code as per suggestion 
let choice=confirm("Are you sure u want to submit the form?"); 
if(choice)?alert('Thank you.'):alert('cancelled.'); 
}); 
}); 
</script> 

さて、問題は、マウスダウンイベントがのonchangeイベントの前に呼び出され、そのデータがテーブルに保存されていないです。 誰かが私に上記の問題を解決するのを助けるなら、大きな助けになるでしょう。

ありがとうございます。

Answer 1

は、これまでのところ、私はあなたの問題のような問題を回避するために、手動でmousedownイベント内onchangeをフォームを送信し、その後onchange前mousedownイベント火災は、なぜあなたが引き金といけない前ajaxコールでtextinputの値を保存することです理解しました

$("#form").onchange();または$("#form").fireEvent("onchange");

EDIT以下

私はちょうど問題がまだ解決されていないとコメントが投稿されたので、私が議論していたアイデアを理解しているOPが問題を抱えている場合、テキストの変更を追跡できる変更に及び、これは文句を言わない任意の要素を選択onchangeが$('input[class="vchange"]').trigger('change');のように、手動でmousedown内部onchangeをトリガすることであり、あなたがonchangeイベント'.vchange input[type=text]'のためのあなたのコードで間違った選択をした後は、常にトリガするmousedownイベントの問題に取り組むためにと入力.vchangeまたは'input[class="vchange"]'を使用してください。下のajax呼び出しを送信した後にフォームが常に提出されるデモを参照してください。

しかし、これは、クラス.vchangeの入力がすべて空でないということを意味しています。より良い方法は、.vchangeのフィールドをすべて集めてvalue!==''という別の関数を作成し、多数のフィールドがある場合はそれらをすべて保存するために1回の呼び出しを送信することです。あなたが確認するようユーザーに尋ねる同じハンドラで入力を処理しないのはなぜ

$(document).ready(function() { 
 
    $(document).on('change', 'input[class="vchange"]', function() { 
 
    if ($(this).val() !== '') { 
 
     console.log('ajax post back code to save textbox data in database.'); 
 
    } 
 
    }); 
 
    $(document).on('mousedown', '.vsubmit', function() { 
 
    $('input[class="vchange"]').trigger('change'); 
 
    console.log('submitting form'); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="form"> 
 
    <input type="text" class="vchange" /> 
 
    <input type="text" class="vchange" /> 
 

 
    <a href="#" class="btn btn-success vsubmit" onmousedown="return false;">Submit</a> 
 
</div>

Answer 2

？ フォーム要素を使用する場合は、submitイベントを使用して、キーボードのみの入力をサポートする送信ボタンについて考えることができます。

$(function(){ 
 

 
    $('#form').on('submit', function (e) { 
 
    e.preventDefault(); 
 

 
    let choice=confirm("Are you sure u want to submit the form?"); 
 
    
 
    if (!choice) { 
 
     console.info("cancel"); 
 
    } else { 
 
     console.info("ajax post back code to save textbox data in database."); 
 
    } 
 
    }); 
 
    
 
    $('.vsubmit').on('click', function() { 
 
    $("#form").submit(); 
 
    }); 
 
    
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="form"> 
 
    <input type="text" class="vchange"/> 
 
    <input type="text" class="vchange"/> 
 
    <a href="#" class="btn btn-success vsubmit" onmousedown="return false;">Submit</a> 
 
</form>