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

【问题标题】：Open a New Jquery UI Dialog With Links in Existing Dialog使用现有对话框中的链接打开一个新的 Jquery UI 对话框
【发布时间】：2013-06-25 11:01:38
【问题描述】：

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

【问题讨论】：

标签： javascript jquery dialog click

【解决方案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/

【讨论】：

回答你的第一个问题，是的，这就是我打开新对话框的地方。我确实测试了单击事件是否正确绑定，而事实并非如此。我使用 .on 和 .bind ，因为我使用的是 1.9.1 和 .live 已被弃用。感谢您的测试建议。
好的，所以我们知道问题出在按钮事件上。我创建了一个jsfiddle，请看一下：jsfiddle.net/XkwyG
另外，总是尽量只使用一个 $(function() {});您的整个脚本只需要一个。
非常感谢。我也找到了解决方案，但我将您的解决方案标记为答案，因为您引导我走上正确的道路，并且您的解决方案也有效。

【解决方案2】：

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

这个question 也有助于获得最终结果

【讨论】：