私は、（少なくとも私には）かなり簡単で一般的なことのように見えることをしようとしています。
私がウェブページに持っているもののHTMLは次のとおりです。
<div class="allergiesDiv">
<div>
<span class="editButton">Allergies</span><br />
</div>
<span>Allergies</span>
</div>
</div>
最初<span>のボタンを で jQuery ボタンに変えます$('.editButton').button()。（ページにはこれらのペアがたくさんあります。）
私がやろうとしていることは次のとおりです。
- ボタンをクリックすると、それに続くスパンの値が にロードされた jQuery ダイアログがロードされます
<textarea>。<textarea>(おまけ: ダイアログが読み込まれるときに、フォーカスを合わせて、中のすべてのテキストを強調表示したいと思います。) - ユーザーは値を編集し、[OK] をクリックできます。
- ユーザーが [OK] をクリックすると、ダイアログが閉じられ、入力された新しい値がスパンの古い値を置き換えるために使用されます。
私が使用しようとしているコードは次のとおりです (これは IE では問題なく動作しますが、Mobile Safari と Chrome for PC では機能しません)。
注: 各問題を切り分けるために、コードをいくつか切り刻んでいます。少なくともIEでは、これが機能しました。
// How I get the button and bind to the click event
$('.editButton')
.button({icons: {primary:'ui-icon-pencil'} })
.click(EditClicked);
// 'Edit' button click handler
function EditClicked() {
var span = $(this).parent().next().children().first();
var text = span[0].innerText;
var dialog = $('<div>').prop('title', 'Edit: ' + $(this).text());
var textArea = $('<textarea>').css('width', '98%').prop('rows', '4').html(text);
textArea.appendTo(dialog);
var windowWidth = $(window).width();
var buttonTop = $(this).button().offset().top;
$(dialog).dialog({
modal: true,
minWidth: windowWidth / 2,
position: ['center',buttonTop],
buttons: {
'Ok' : function () {
OKClicked(span);
},
'Cancel' : function () {
$(this).dialog('close').remove();
}
}
});
textArea.focus().select();
}
// Dialog 'OK' button click handler
function OKClicked(span) {
var text = $(this).find('textarea')[0].innerText;
span.html(text);
$(this).dialog('close').remove();
}
var buttonTop...これは現在、「ボタンが定義されていません」というエラー メッセージが表示されて壊れています。その理由はまだわかりません (以前はそのメソッドに「ボタン」という名前の変数がありましたが、現在はなくなりました。それがキャッシュの問題かどうかはわかりません)。
それ以外に、私のプロセスの何が問題なのか誰にもわかりますか? クロージャーについて何らかの誤解をしているようですが、このコードのねじれを解消する方法を理解するには、まだ JavaScript を十分に理解していません。