代码之家 › 专栏 › 技术社区 › John

jquery remove()与ie的问题

webforms jquery javascript

John · 技术社区 · 14 年前

我在IE中遇到了jquery的remove()方法的问题。它正在删除元素,但并不完全是:它将保留最后2个结束标记。

我正在使用ASP.NET Web窗体。在页面中,我们使用的是第三方小部件,它是一个javascript include。第三方小部件的一部分是表单内的搜索框和按钮。(下面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> 人工制品。

2 回复 | 直到 14 年前

Arun P Johny 14 年前

据我所见,对于给定的HTML,remove()方法工作正常…它正在移除 div 带班级 getquote 以及所有的孩子。

页面中的表单和分隔符在所述元素之外,因此不会被给定的命令删除。 $('div.getquote').remove(); .

我认为您可能需要重新考虑HTML的内容,因为 form 元素在另一个元素中 形式 元素,我认为它不是格式正确的HTML。

John 14 年前

我得出的结论是,我所要做的在浏览器层是不可能的。嵌套问题 <form></form> 元素。IE会忽略 <form> 但是当它到达 </form> ,它将关闭外部窗体,从而引发解析。

然后我有几个选择:

1)不要再使用ASP.NET Web窗体。而是使用ASP.NET MVC。好吧,这是我的梦想,但对于传统应用程序来说并不现实。

2)在使用Web表单时,首选XML源而不是JS包含。一般来说,这可能更好,但经理们喜欢第三方告诉他们,他们的小部件可以在5分钟内放入一个页面,只需要1行代码。

3)不要调用浏览器中包含的第三方JS,而是从自定义服务器方法调用它。然后,使用regex删除有问题的标记,并将所需内容传递给浏览器。只有在2)不可用的情况下才能进行丑陋的黑客攻击。