0

我有一个网站，最终用户可以在其中单击按钮打开要填写的表格。在该表单中，可以单击另一个按钮来打开另一个表单以提供附加信息。代码如下：

打开主窗体：

<script src="/Scripts/colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function () {
        $("#NewGameButton").click(function () {
            $.colorbox({ width: "80%", height: "80%", iframe: true, href: "/utility/NewGame.aspx" });
        });
    });
</script>

在 NewGame.aspx 中：

<script src="/Scripts/colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function () {
        $("NewGameType").click(function () {
            $.colorbox({ width: "80%", height: "80%", iframe: true, href: "/utility/NewGameType.aspx" });
        });
    });
</script>

主窗体（NewGame.aspx）打开没有任何问题，但是当我单击按钮打开 NewGameType.aspx 时，iFrame 闪烁然后消失。Chrome 的开发者工具控制台中没有错误，所以我不知道发生了什么。谁能告诉我如何使它正常工作？

4

2 回答 2

0

我认为这是由简单的点击方法引起的。您需要委托点击页面上的新元素，以便：

主要形式：

<script src="/Scripts/colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function () {
        $("#NewGameButton").click(function () {
            $.colorbox({ width: "80%", height: "80%", iframe: true, href: "/utility/NewGame.aspx" });
        });


        $("NewGameType").on('click', function () {
            $.colorbox({ width: "80%", height: "80%", iframe: true, href: "/utility/NewGameType.aspx" });
        });
    });
</script>

在旧的 jQuery 版本中，您可以使用live：

$("NewGameType").live('click', function () {..}

在这里您可以阅读有关on方法和委托jQuery API的更多信息

于 2013-06-08T18:02:25.413 回答
0

我将 class="NewGameButton" 和 class="NewGameType" 添加到相应的按钮，然后将代码更改为：

        $(".NewGameButton").colorbox({ width: "80%", height: "80%", iframe: true, href: "/utility/NewGame.aspx" });

        $(".NewGameType").colorbox({ width: "80%", height: "80%", iframe: true, href: "/utility/NewGameType.aspx" });

这使得一切都可以完全按照我的意愿工作。

于 2013-06-08T19:33:51.817 回答