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

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 自然地选择了页面上较高的那个——隐藏的那个。