嵌套的colorboxes

Question

我有一个网站，在那里最终用户可以点击一个按钮，打开一个表格进行填写。在该表单中，可以单击另一个按钮打开另一个表单以提供其他信息。代码如下：

要打开主窗体：

<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的开发者工具控制台中没有错误，所以我不知道发生了什么。有没有人能告诉我怎么才能正常工作？

Answer 1

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

主要形式：

<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的更多信息

Answer 2

我将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" });

这使得一切都能完全按照我想要的那样工作。