たとえばこんなプルダウンがあるとして。
ついうっかり変えてしまうと困るわけですよ。
なのでこうChageイベントを拾って、確認ダイアログとか出してあげるじゃないですか。
でもこれ「キャンセル」押してもプルダウンは元には戻らないんですよね。
困ったもんです。
検索するとhiddenに値を入れておいてどうこう…ってのが多いみたいですが、
画面項目はあんまり増やしたくないのでクロージャを使ってこんな感じはどうかな。
(function($) { $.fn.exChange = function(callback, fn) { // 値取得用関数定義(なければvalueをとる) var func = fn || function() { return $(this).val(); }; $(this).each(function() { // イベントバインド時に入力内容を保持 var val = func.apply(this); // changeイベントにバインド $(this).change(function() { // 発火前にargumentsの末尾に変更前の値を入れる Array.prototype.push.call(arguments, val); // イベントを発火 callback.apply(this, arguments); // 終わったら更新しておく val = func($(this)); }); }); } })(jQuery);
普通のchangeイベントみたいにバインドすると、
コールバック関数に変更前の値が入ってくるっていう仕組み。
$("#pull").exChange(function(event, prev) { if (!confirm('本当に変更してよろしいですか?')) { return $(this).val(prev); } });
こんな感じかな。
値取得はvalue固定でもいいんだけどまぁ一応textareaとかでも使いたいかなと思って
関数指定できるようにしてみた感じ。
liveとかdelegateとかonみたいには使えないのがちょっと難点かな。
【追記】
コメント欄で指摘を頂きまして、callbackの呼び出しを修正しました。