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

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

主要形式：

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

这样可以让一切按照我的意愿完成。

嵌套的彩色盒子

2 个答案:

主要形式：