Question

我在IE中遇到jQuery的remove（）方法的问题。它正在删除元素，但不完全是：它留下了最后2个结束标记。

我正在使用ASP.Net Web Forms。在页面中，我们使用的是第三方小部件，这是一个Javascript包含。第三方窗口小部件的一部分是窗体内的搜索框和按钮。（div class =“getquote”容器中的所有内容都来自第三方小部件）。

以下是页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestFooBar.aspx.cs" Inherits="MyProject.TestFooBar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="top">Some Stuff</div>
            <div class="getquote">
            <div class="box">
                <form style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px;
                padding-top: 0px" action="http://foo.com/?q=bar"
                method="post" target="_self">
                <input class="ticker" onclick="this.select()" value="Enter foo" maxlength="15"
                    type="text" name="fooInput" jquery123456789="42" />
                <input class="go" value="Get Foo" type="submit" name="Go" />
                </form>
            </div>
        </div>
        <div id="bottom">Some More Stuff</div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script type="text/javascript">
            $(function() {
                alert($("div").length)

                $('div.getquote').remove(); 

                alert($("div").length)
            });
        </script>
    </div>
    </form>
</body>
</html>

ASP.Net开发人员将立即认识到一个巨大的问题：您无法在ASP.Net Web表单中拥有表单，因为Web表单使用围绕整个页面的单个外部表单元素。

所以我的解决方案是使用jQuery删除表单及其功能，如下所示：

    $(function() { $('div.getquote').remove(); });

不幸的是，remove（）在IE中无法正常工作。它留下了以下标记：

</form></DIV>

任何人都可以解释为什么会发生这种情况以及可能的解决方案是什么？

分析更新 我仍然没有明确的解决方案，但相信问题可能是不正确形成的HTML。当您通过IE开发人员工具栏查看源代码时，结果如下。

<FORM id=form1 method=post name=form1 action=TestFooBar.aspx>
<DIV><INPUT id=__VIEWSTATE value=/wEPDwULLTE2MTY2ODcyMjlkZJK6qpmH4eDoZyoX9RueM4keR6Hd type=hidden name=__VIEWSTATE> </DIV>
<DIV>
<DIV id=top>Some Stuff</DIV></FORM>
<DIV id=bottom>Some More Stuff</DIV>
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></SCRIPT>

<SCRIPT type=text/javascript>
            $(function() {
                alert($("div").length)

                $('div.getquote').remove(); 

                alert($("div").length)
            });
        </SCRIPT>
</DIV></FORM>

因此，当jQuery成功删除大部分<div>时，它会留下关闭</form>工件。

Answer 1

据我所知，使用给定的HTML，remove（）方法工作正常......它正在移除div类getquote及其所有子项。

页面中剩下的表单和div位于所述元素之外，因此不会被给定的命令$('div.getquote').remove();删除。

我认为你可能不得不重新考虑HTML的内容，因为在另一个form元素中有一个form元素，我认为它不是一个格式正确的HTML。

Answer 2

我得出的结论是，我正在尝试做的事情在浏览器层中是不可能的。嵌套<form></form>元素的问题。 IE将忽略<form>，但当它到达</form>时，它将关闭外部表单，这将导致解析。

然后我有几个选择：

1）再也不要使用ASP.Net Web Forms了。而是使用ASP.NET MVC。好的，这是我的梦想，但对于遗留应用来说并不现实。

2）在使用Web表单时，首选JS for XML包括。一般来说，这可能更好，但管理人员喜欢被第三方告知他们的小部件可以在5分钟内只用一行代码放入页面。

3）不要在浏览器中调用第三方JS include，而是从自定义服务器方法调用它。然后，使用Regex去除有问题的标记并将所需内容传递给浏览器。只有在2）不可用时才应该进行丑陋的黑客攻击。

IE的jQuery remove（）问题

2 个答案: