jquery - 加载外部数据无法使用多个链接正常工作

Question

当有多个链接时，模式对话框的加载次数与链接的数量一样多。

例如，如果有 3 个链接class="test"，当单击第一个链接时，它将在每个链接之上加载 3 次。

无论如何要修复它？

<a href="/user/login/" class="test">comment #1</a><br>
<a href="/user/signup/" class="test">comment #2</a><br>
<a href="/user/reset_password/" class="test">comment #3</a><br>

  $('a.test').click(function() {
        var url = this.href;
        // show a spinner or something via css
        var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
        // open the dialog
        dialog.dialog({
            // add a close listener to prevent adding multiple divs to the document
            close: function(event, ui) {
                // remove div with all data and events
                dialog.remove();
            },
            width: 400,
            modal: true
        });
        // load remote content
        dialog.load(
            url, 
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                // remove the loading class
                dialog.removeClass('loading');
            }
        );
        //prevent the browser to follow the link
        return false;
    });

Answer 1

试试这个...

<script type="text/javascript">
    $(document).ready(function(e) {
        $('body').append('<div id="newDialog" class="loading"></div>');
        $("#newDialog").dialog({
            close: function(event, ui) {
                $("#newDialog").html("").addClass('loading');
            },
            width: 400,
            modal: true
        });
         $('a.test').click(function() {
            var url = $(this).attr("href");
            $("#newDialog").load(
                url, 
                {},
                function (responseText, textStatus, XMLHttpRequest) {
                    $("#newDialog").removeClass('loading').dialog("open");
                }
            );
            return false;
        });  
    });
</script>

它减少了您必须启动 $.dialog() 的次数，这非常昂贵。

它也摆脱了同一次点击的多个对话框。