Question

我有一个由链接和ID为“containerDiv”的div组成的主页面。当你按下链接时，它会使用Ajax从另一个页面加载一些HTML到这个div中。

返回的HTML包含一个表单。提交表单时，我希望保持在同一页面上并在div中显示结果内容。

Please see a picture showing what I wish to accomplish by clicking this link

主页上的脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $("a").click(function () {
            $('#containerDiv').load(this.href + ' #contentDiv', function () {
                alert($('#page2Form').id);
                $('#page2Form').submit(function () {
                    $.post(
                    pageName,
                    this.serialize(),
                    function (data) {
                        if (data.success)
                            alert('done');
                        else
                            alert('error');
                        $('#containerDiv').html(data);
                    }
                );
                    return false;
                });
            });
            return false;
        });
    });
</script>

主页上的相关HTML：

<a id="link1" href="page1.aspx">Page 1</a>
    <br />
    <div id='console' style="border: 2px solid red; width: 1000px">
        when the link is clicked this content is replaced with new html.
    </div>

内容页面上的相关HTML：

    <div id="contentDiv">
        <form id="page2Form" runat="server">
        <div>
            <h1>
               Page 2</h1>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="submit" OnClick="Submit_OnClick" />
        </div>
        </form>
    </div>

问题是我在返回的HTML上找不到表单'page2Form'。

提醒（$（'＃page2Form'）。id）;返回'undefined'

也许它与DOM中没有加载该元素有关。

Answer 1

这里有一些事情，jQuery对象没有.id属性，你想要匹配集中第一个元素的id，如下所示：

alert($('#page2Form')[0].id);
//or without jquery:
alert(document.getElementById('page2Form').id);

另外，请确保在 $('#containerDiv').html(data);调用后查找，以便将其添加到DOM中。如果您在添加之前找到，则使用返回的data作为上下文来查看，如下所示：

alert($('#page2Form', data)[0].id);

在返回的HTML上找不到表单

1 个答案: