Question

我在单击现有对话框中的链接后尝试从现有对话框打开对话框。我无法弹出新对话框。以下是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底部的其中一个链接并打开新对话框。我无法做到这一点，我不知道此时该做些什么。我已经能够获得打开对话框的链接，但是当我尝试在点击链接时从现有对话框打开一个新对话框时，同样的方法失败了（我已经能够从现有对话框中打开一个新对话框）然而，使用按钮。）

Answer 1

实际上这是可能的，我几天前刚刚做过。

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

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

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

jsfiddle：http://jsfiddle.net/XkwyG/1/

Answer 2

感谢@Rafi W.带领我走上了正确的道路。点击事件没有绑定所以我做了一些更多的环顾四周，我最终得到了以下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");
    });
});

此question也有助于获得最终结果

使用现有对话框中的链接打开一个新的Jquery UI对话框

2 个答案: