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

Question

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

这是我尝试使用的代码，遵循我在JQuery API、load() but append data instead of replace 和stackoverflow 问题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'));

我是否需要在我的网站上加载一个额外的脚本才能正常工作？ 这是一个小提琴，以防万一

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

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);
});