私は再び jQuery を使って大騒ぎしていますが、今回は .click() の呼び出しではうまくいきません。
アイデアは、ui-hint-confirm でタグ付けされた要素を探して確認ダイアログを表示するシングルトン クラスを持つことです。ユーザーが [OK] をクリックすると元の要素がクリックされ、それ以外の場合はダイアログが単に閉じられます。しかし、コードは 1000 語以上の単語を表すことができるため、次のようになります。
ConfirmDialogManager = function () {
var _dialogShown = false;
var ensureDialog = function (target, text) {
var targetEl = $(target);
if (!text) {
text = targetEl.attr('title');
text = text == null || text == '' ? 'Are you sure?' : text += '?';
}
var el = $('div#dlgConfirm');
if (el.length == 0)
el = $('<div id="dlgConfirm"></div>');
el.dialog({
autoOpen: false,
modal: true,
width: 300,
height: 150,
minWidth: 200,
minHeight: 130,
title: 'Please confirm',
maxHeight: 500,
position: 'center',
open: function () {
$(this).css({ 'max-height': 500, 'overflow-y': 'auto' });
},
buttons: {
'OK': function (ev) { onConfirm.call(target, ev); },
'Cancel': function (ev) { onCancel.call(target, ev); }
}
});
el.html(text);
$('div#dlgConfirm').dialog('open');
};
var closeDialog = function () {
$('div#dlgConfirm').dialog('close');
};
var onConfirm = function (ev) {
closeDialog();
_dialogShown = true;
$(this).click();
_dialogShown = false;
};
var onCancel = function (ev) {
_dialogShown = false;
closeDialog();
};
var onClick = function (ev) {
if (_dialogShown)
return true;
ensureDialog(this, ev.data.text);
return false;
};
return {
init: function () {
$('.ui-hint-confirm').click(onClick);
},
setConfirm: function (target, text) {
$(target).click(text, onClick);
}
};
} ();
$(document).ready(ConfirmDialogManager.init);
ロード時に ui-hint-confirm 要素を探すことに加えて、setConfirm 関数を使用して手動で呼び出すこともできます。
上記のコードの問題は、 $(this).click() 内で何も起こらないことです。デバッガー (Chrome) とアラートを介してその行に到達することを確認しました。
$(this). unbind('click', onClick) と $(this). unbind('click') も試しましたが、違いはありませんでした。コンソールに記録されるエラーはありません。
何か案は?ありがとう。
更新: 要求に応じて、これが機能する html 要素のサンプルを追加します。
通常のリンクで作業する必要があります:
<a href="http://stackoverflow.com" class="ui-hint-confirm">Stack Overflow</a>
jsのみのリンクで作業する必要があります:
<a href="#" class="ui-hint-confirm">JS Only</a>
送信ボタンで作業する必要があります:
<input type="submit" value="Submit button" class="ui-hint-confirm" />
いくつかのスクリプトが既に添付されていると言ったリンクで作業する必要があります。
<a href="http://stackoverflow.com" id="theLink" class="ui-hint-confirm">Stack Overflow</a>
$('#theLink').click(function () { alert('Now going to Stack Overflow'); } );
この最後の例では、警告メッセージの前にダイアログを表示する必要があります。
ExtJS (現在は Sencha と呼ばれています) で問題なく動作する同様のものがありますが、jQuery で動作させることはできません。
ありがとう