-1

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

我遇到的问题是我有一些“无效”的旧 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>

如您所见，在 a<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">

编辑2：

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

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

要查看此问题的实际效果，请查看此页面（确保您在 Firefox 中查看它，因为它适用于 IE）。

4

3 回答 3

1

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

于 2013-01-10T10:48:56.213 回答
0

那是一个无效的标记。如果无法更改标记，我建议您更正标记或为此使用 Jquery .submit()。

于 2013-01-10T10:54:12.840 回答
0

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

// 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>

无效的 HTML 由 生成.innerHTML。Firebug 的 HTML 面板和 alert() 都不显示命名空间属性。可悲的是，我不熟悉命名空间，所以我无法告诉你出了什么问题：你的代码、Firebug 或 Firefox。

于 2013-01-10T13:22:13.057 回答