Javascript 打开一个新的Jquery UI对话框，其中包含现有对话框中的链接

单击现有对话框中的链接后，我试图从现有对话框中打开一个对话框。我无法弹出新对话框。下面是JavaScript：

$(function() {
$("#homepage-description").dialog({
    autoOpen: false,
            modal: true,
    buttons: {
        'Sign Up': function() {
            $(this).dialog('close', function() {
                $(this).dialog('close');
                $("#signup-description").dialog("open");
            });

        },

        'Log In': function() {
            $(this).dialog('close');
            $("login-description").dialog("open");
        }
    }
}).dialog("widget").find(".ui-dialog-buttonset button")
.eq(0).addClass("btn btn-large").attr('id', 'home-sign').end()
.eq(1).addClass("btn btn-large").attr('id', 'home-log').end();

$("#welcome-link").click(function() {
    $("#homepage-description").dialog("open").load("/homepage/");
    return false;
});

$(".ui-dialog-titlebar-close").click(function() {
    $("#homepage-description").dialog("close");
});

$("#home-sign").click(function() {
    $("#signup-description").dialog("open").load("/sign-up/");
    return false;
});

$("#home-log").click(function() {
    $("#login-description").dialog("open").load("/login/");
    return false;
});

$(function() {
    $("#tos-description").dialog({
        autoOpen: false,
                modal: true
    });

    $("#home-tos").click(function( event ) {
                    event.preventDefault();
        $("#tos-description").dialog("open").load("/tos/");
                return false;
    });

    $(".ui-dialog-titlebar-close").click(function() {
        $("#tos-description").dialog("close");
    });
});

这是html：

<div id="home-body">
        <p class="titles">Some Words Here</p>
        <div id="home-photo">
            <img src="{{ STATIC_URL }}img/frontimage.png">
        </div>
        <div id="home-list">
            <ol>
                <li class="flat-text flat-bold">Find</li>
                <li class="flat-text flat-bold">Download</li>
                <li class="flat-text flat-bold">Go</li>
                <li class="flat-text flat-bold">Come back</li>
            </ol>
        </div>
        <div id="home-buttons">
        </div>
        <div id="flat-links">
            <a id="home-tos" href class="flat-text flat-bold">Terms of use</a> - <a id="home-privacy" href class="flat-text flat-bold">Privacy Policy</a> - <a id="home-site" href class="flat-text flat-bold">Sitemap</a>
                            <div id="tos-description"></div>
        </div>

这里有一些词
查找
下载
进入
返回
-  - 

---

理想的情况是单击html底部的一个链接并打开新对话框。我一直无法做到这一点，我不确定在这一点上该做什么。我已经能够获得打开对话框的链接，但是当我试图在单击链接的同时从现有对话框打开新对话框时，同样的方法失败了（但是，当使用按钮时，我已经能够从现有对话框打开新对话框）。

实际上这是可能的，我几天前刚刚做到了

能否确保您的单击事件在对话框中正确绑定？也许在点击时发出警告，看看它是否真的有效

这是打开新对话框的地方吗

$("#home-tos").click(function( event ) {
                event.preventDefault();
    $("#tos-description").dialog("open").load("/tos/");
            return false;
});

你能测试一下这样的东西吗：

$("#home-tos").live("click", function() {
             alert("click worked");
});

还有一个打开的对话框方法，您可以在其中执行以下操作：

   $("dialog-div").dialog({ 
    autoOpen: false,
    open: function() {
            $(this).find("yourbutton")click(function() {
                 alert("click worked");
           });
    }
});

---

jshiddle:

感谢@Rafi W.带领我走上正确的道路。click事件没有绑定，因此我进行了更多的查看，最终得到了以下JS：

$(function() {
    var linkPop = {
        autoOpen: false,
                modal: true,
    };

    $(document).on("click", "#home-tos", function( event ) {
        event.preventDefault();
        $("#tos-description").dialog(linkPop).dialog("open").load("/tos/");
        return false;
    });

    $(".ui-dialog-titlebar-close").click(function() {
        $("#tos-description").dialog("close");
    });
});

---

这也有助于获得最终结果

在回答您的第一个问题时，是的，这就是我打开新对话框的地方。我进行了测试，以查看单击事件是否正确绑定，而不是。自从我使用1.9.1以来，我使用了.on&.bind&.live已被弃用。谢谢你的测试建议。好的，我们知道问题出在按钮事件上。我创建了一个JSFIDLE，请看一看：另外，始终尝试只使用一个$（function（）{}）；你的整个剧本只需要一个。非常感谢。我也找到了一个解决方案，但我把你的答案作为答案，因为你引导我走上了正确的道路，你的解决方案也很有效。