使用 .append 和 .load 将另一个页面的一部分加载到目标页面

Question

我正在使用 Squarespace 并尝试使用 .append 和 .load 首先创建一个空的 div（因此 .append）然后将我的时事通讯 div 及其内容从我网站的 "mother" 页面插入我网站的许多其他页面（必须与 JQuery 一起，而不是 PHP).这样一来，我只需编辑母元素，然后更改就会反映在其他页面中。 Squarespace 在这些方面没有提供任何帮助，我在他们的问题论坛中也找不到任何内容。

这是我尝试按照我在 JQuery API, load() but append data instead of replace and the Whosebug question JQuery use .load() to append data instead of replace 找到的示例使用的代码，但我一定还是做错了什么：

简单JQuery

$(".content").first().before("<div id='newsletter-section'>Newsletter Signup</div>");
// the above is to create the target div
$("#newsletter-section").load("example.com/newsletter .content");

Ajax

$(".content").first().before("<div id='newsletter-section'>Newsletter Signup</div>");
// the above is to create the target div
$.ajax({
    url: 'example.com/newsletter',
    dataType: 'html',
    success: function(html) {
        var div = $('.content', $(html)).addClass('done');
        $('#newsletter-section').html(div);
    }
});

我试过使用 .get 方法：

$(".content").first().before("<div id='newsletter-section'>Newsletter Signup</div>");
// the above is to create the target div
$.get("https://www.ikingdesigns.com/newsletter",function(data) {
    var newsletter = $(data).filter(".content");
    $("#newsletter-section").append(newsletter);
});

并且还在 .append 中使用 .load:

$('.content').append($('<div id="newsletter-section">Newsletter Signup</div>').load('example.com/newsletter .content'));

我是否需要在我的网站上加载额外的脚本才能运行？这是一个 fiddle 以防万一

任何帮助将不胜感激:) 提前致谢

Answer 1

像这样的东西会起作用：

从目标部分内的 url 加载时事通讯，然后回调以通过 SS 的生命周期方法对其进行初始化。

$(".content").first().before("<div id='newsletter-section'>Newsletter Signup</div>");

$('#newsletter-section').load('https://www.ikingdesigns.com/newsletter .newsletter-block', function(){
  var block = Y.one('.newsletter-block');
  window.Squarespace.initializeNewsletterBlock(block);
});

使用 .append 和 .load 将另一个页面的一部分加载到目标页面

Using .append & .load to load a section of another page to target page

ajax

jquery

load

append

squarespace