Question

<a id="page-help" href="page.html" onclick="window.open(this.href, 'popupwindow', 'width=500,height=300'); return false;">what is this?</a>

$(document).ready(function() {
    $('#page-help').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
                width: 500,
                height: 300
            });

        $link.click(function() {
            $dialog.dialog('open');

            return false;
        });
    });
});

请参阅上面的代码并告诉我它是如何工作的。据我所知，当页面加载时，会创建并加载一个jquery对话框，但是当用户点击链接时会显示。我是对的，如果是，那么这种方法将不会很好，因为如果我以这种方式附加jquery代码与我的页面中的所有链接然后许多jquery对话框将加载页面内容，这可能会减慢页面加载......我是对的吗？

Answer 1

你是对的，但代码不是！首先，代码必须包含在<script></script>标记内，其次，在评论中提及@Satpal时，ID必须是唯一的，因此您必须使用id代替class或删除.each。

最后，无论你如何为你的html实现jQuery或JS代码，它都需要一些时间来加载！

Answer 2

是的，你是对的，但是当你只有一个预加载对话框时就不会有问题了，这就是使用ID作为选择器时的情况。

如果您有多个，只有在用户点击链接后加载内容才会更加优化，如下所示：

$(document).ready(function() {
    $('a[rel=dialog]').on('click', function(e){
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                autoOpen: true,
                title: $link.attr('title'),
                width: 500,
                height: 300
            });
         e.preventDefault();
    });
});

假设您的链接标记为<a href="contents.html" rel="dialog">

，则可以正常工作

这个jquery代码将如何工作？

2 个答案: