Question

我正在使用100％纯javascript，试过Jquery但它没有帮助。代码在FF / Chrome / Safari中无效。

我已经构建了“就地编辑”功能，当用户点击“编辑”（通过onclick调用外部函数 - 传入item_id）时 - 隐藏一串文本以显示具有相同文本字符串的输入它。（通过更改类）“编辑”也替换为“保存”。完成编辑字符串后 - 用户单击“保存”，一切恢复正常。

AJAX正在处理所有更新 - 但是注释掉AJAX块并没有解决它。

我正在加载这些对象的流。 javascript 适用于所有这些 - 但只会更新DOM，无论如何，出现是最近24小时之前的项目。块本身是相同的。也就是说 - 当我点击“编辑”时，在过去的18-26小时内添加的项目，什么都不做。但是，如果我提醒我要编辑的元素的类，则表示“编辑”（而不是“已保存”），就像它正在工作一样。（见下文）虽然这种变化从未反映在检查元素中。

页面上的代码

<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

如果有更多细节会有所帮助 - 我会提供。

这是一个问题的恶魔 - 没有明显的解决方案。非常感谢你能给出的任何方向！

Answer 1

解决。像往常一样，这是小事。前几个块在页面加载时加载 - 然后在用户导航时隐藏，导致重复的ID。 Javascript自然选择了页面上的那个 - 隐藏的那个。

Javascript不会更新看似最近的项目的DOM

1 个答案: