jquery - 在 Jquery 中使用按钮加载 DIV

Question

我正在寻找一种使用 Jquery 的方法，该方法仅在使用按钮/事件调用时才将 DIV 加载到页面上。我尝试了很多功能都没有效果，让我想知道它是否可能。鉴于我是 Jquery 的初学者，我确信我的知识匮乏阻碍了我完成这一壮举。谁能指出我正确的方向？

Answer 1

在 JavaScript 中:

function loadDiv()
{
    var elem = $('div');
    elem.attr('class', 'new_div');
    elem.html('hello world');
    $('body').append(elem);
}

然后在你的html中:

<a href="javascript:loadDiv()">Load a div</a>

你显然可以通过这个变得更加健壮，但是如果你想要一个更好的例子，你应该提供更多的信息

编辑: 为了最大限度地减少加载时间，我最近构建了一个网站，该网站仅加载特定页面的相关信息，然后使用 ajax 加载其他内容。此功能仅根据请求提供，因此我在单击时加载特定的 js 文件，其中包含该网站的额外功能。让我们假设它使用与上面相同的示例单击...

function loadDiv(){
    if(typeof loadExtraContent() == "undefined")
    {
        $.ajax({
            url: '/some_file.js',
            async: false,
            success: function(data, status){
                if(status == 'success')
                {
                loadExtraContent();
                }
                }
        });
    }
    else
    {
        loadExtraContent();
    }
}

因此，仅当该函数未定义时，函数 loadExtraContent() 才会在我通过 ajax 加载的 some_file.js 文件中定义。这样，您在需要之前根本不必加载脚本，如果函数已经定义，则无需再次加载它。

然后在 some_file.js 中，您将拥有此示例中的原始函数...

function loadExtraContent()
{
    var elem = $('div');
    elem.attr('class', 'new_div');
    elem.html('hello world');
    $('body').append(elem);
}

请记住，我这样做是因为我构建的网站大量使用 ajax，并且绝对有大量额外内容。这项工作需要这样的待遇。这有点矫枉过正，除非预期流量很高或者您出于某种原因想要节省带宽(例如托管您自己的视频并且不想无缘无故地发出 4 兆的点击量)