Question

我一直在网上搜索数小时，但我找不到解释或解决方案。所以，让我们看看是否有人可以在这提供一个......

我遇到的问题是我有一些“无效的”旧HTML，我们正在通过JQuery注入一些其他div等来改进网站。但是在改变了DOM后，一些功能不再起作用了。

让我举个例子。旧的HTML类似于：

<table>
   <form method="POST">
   <tr>
      <td><input type="text" value="test" /></td>
   </tr>
   <tr>
      <td><input type="submit" value="SEND!" /></td>
   </tr>
   </form>
</table>

正如您所看到的，<form>嵌套在<tr>之外，实际上无效。但是它被浏览器正确解释并且它正在工作。但是如果我通过JQuery操纵DOM浏览器（在我的情况下是Firefox）注意到它是错误的，按钮不再工作了。检查我的Firebug会给出类似的东西：

<table>
   <form method="POST"></form>
   <tr>
      <td>...

显然，submit按钮不再有效，因为它已“自动”关闭了<form>标记，而submit已不再嵌入。

任何人都可以对这个问题有所了解吗？为什么会发生这种情况，我该怎么做才能防止这种情况发生（除了更改原始HTML）。

非常感谢!!

修改

为了避免得到“无效标记”的答案，让我向您展示第二个例子。

<input type="text" id="something" value="" />

在onLoad上加载的Javascript函数：

function setRequired() {
   document.getElementById('something').setAttribute('aria-required', 'true');
}

在onload之后我可以在Firebug中检查它并且它按预期工作：

<input type="text" id="something" value="" aria-required="true" />

但是如果我在之后添加DOM操作，它最终会出现：

<inputaria-required="true" type="text" value="" id="something"></inputaria-required="true">

EDIT2：

至于DOM修改，我只是将整个页面包裹在<div>标签的结构中。所以像（简化）：

$('body').wrapInner('<div class="container">');

要查看此问题，请检查this page（确保您在Firefox中查看它，因为它适用于IE）。

Answer 1

这是由浏览器而不是jQuery完成的。您可以阻止它的唯一方法是使您的HTML代码有效，即。将<table>放在<form>

中

Answer 2

这是一个无效的标记。如果无法更改标记，我建议您更正标记或使用Jquery .submit（）。

Answer 3

您之后添加的代码非常混乱。我说它需要一个非常精确的时机才能正常工作：

// Bind a page load event handler
$(document).ready(function() {
    LoadStyle();
});

// Manipulate page with raw HTML 1/2 seconds after page load
function LoadStyle() {
    setTimeout(function () {
    var outerbody = "<div>";
    var outerbodyEnd = "<\/div>";
    var frameHtml = $('body').html();
        var frameHtml = $('body').html();
        document.body.innerHTML = outerbody + frameHtml + outerbodyEnd;
    }, 500);
}

// Override previous onload handlers
window.onload = setRequired;

// Manipulate page with DOM methods right after page load
function setRequired() {
    var field;
    field = document.getElementsByName('required_one')[0];
    setAttrNS(field, "aria-required", "true");
}

无论如何，如果将setTimeout()延迟增加到5000毫秒，您将看到LoadStyle()生成无效节点。经过进一步调查，我编写了这个仍然存在问题的较短片段（不涉及jQuery）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test wrapping the content</title>
        <script type="text/javascript" language="javascript">
            window.onload = function(){
                var field = document.getElementsByName('required_one')[0];
                field.setAttributeNS("http://www.w3.org/2005/07/aaa", "aria-required", true);
                alert(document.getElementsByTagName("body")[0].innerHTML);
            };
        </script>
    </head>
    <body>
        <input type="text" name="required_one" value="This should show">
    </body>
</html>

.innerHTML生成无效的HTML。 Firebug的HTML面板和alert（）都不显示命名空间属性。遗憾的是，我不熟悉命名空间，所以我无法告诉你错误：你的代码，Firebug或Firefox。

为什么在JQuery DOM操作之后我的（不正确的）DOM结构会自动更正？

3 个答案: