100%純粋なjavascriptを使用していますが、Jqueryを試しましたが、役に立たなかったです。 FF/Chrome/Safariで動作しないコード。Javascriptは最近のようにDOMを更新しません。
ユーザーが「編集」(onclickで外部関数を呼び出す - item_idを渡す)をクリックしたときに編集可能な機能を構築しました。同じ文字列の入力を表示するために、その中に。 (クラスを変更することによって) "編集"も "保存"に置き換えられます。文字列の編集が完了すると、ユーザーは保存をクリックし、すべてが元の状態に戻ります。
AJAXはすべてのアップデートを処理していますが、AJAXブロックをコメントアウトしても修正されません。
これらのオブジェクトのストリームをロードしています。 javascript はすべてで動作しますが、と表示されているものは視覚的にDOMのみを更新しますは過去24時間以内のアイテムです。ブロック自体は同一です。つまり、「編集」をクリックした直後の18〜26時間以内に追加された項目は何もしません。しかし、私が編集したい要素のクラスを警告すると、それは働いているように "編集"( "保存"とは反対)と言います。 (下記参照)この変更はinspect要素に反映されませんが。
<input type="text" class="input_field" id="input_254" value="Foo" onkeydown="javascript: if (event.keyCode == 13) { update(254); }" style="display: none; ">
<span class="user_links" id="display_269" style="display:none;">Foo</span> //hidden span that holds the value and acts at the check
<span id="edit_state_269" class="saved" style="display: none;">Foo</span>
<span onclick="update(269)" id="edit_269">Edit</span>
外部のJavaScript
function update(item_id) {
var links_span = document.getElementById('display_' + item_id);
var input_span = document.getElementById('input_' + item_id);
var string_old = document.getElementById('edit_state_' + item_id).innerHTML;
var state_check = document.getElementById('edit_state_' + item_id);
var edit_button = document.getElementById('edit_' + item_id);
if (state_check.getAttribute('class') == 'saved') {
// Hide the links display list and show the input field
links_span.style.display = 'none';
input_span.style.display = 'inline';
// Change the Edit button text and state_check
edit_button.innerHTML = 'Save';
state_check.setAttribute('class','editing');
//alert(state_check.getAttribute('class')); // this alerts "editing" although in DOM it is still "saved" on the blocks that are the problem
ページ上
コードは、任意の詳細は、参考になる場合 - 私はそれらを提供します。
これは問題の悪魔です。明らかな解決策はありません。あなたが与えることができるどんな方向にも本当に感謝します!
あなたのHTMLには数字が混在しています - 254と269 –
あなたの要件を理解していれば、あなたのコードは途方もないものです。私は事前に構築されたものを調べることをお勧めします。あなたの記事でjQueryについて言及して以来、私はここから始めることをお勧めします:使い方:http://www.appelsiini.net/projects/jeditable。デモ:http://www.appelsiini.net/projects/jeditable/default.html –