JQuery append在JQuery单击函数中不起作用

Question

所以我试图在用户点击“Go”之后和新页面加载之前立即在RichText编辑器中添加徽标。

$('#Go').on('click', function (e) {
    e.preventDefault();
    $.get(url, function(data) {
        var html = '<img src="' + data + '" width=100px height=100px></img>';
        $('.EditorFrame').contents().find('body').append(html);
    });
});

就像我点击“Go”一样，在加载新页面之前，图像会短暂出现在编辑器中。 新页面 - 除了我们编辑的结果外只显示空白 ！ 我也用纯文本尝试了这个 - 同样的故事。

我努力调试。 例如，放：

console.log($('.EditorFrame').contents().find('img'));

紧跟在追加行之后，会打印出img标签！

有趣的是，当我在控制台中复制/粘贴相同的代码然后按“Go”时，一切正常，我可以看到图像，文本，无论我放在编辑器中。

我正在使用最新的谷歌浏览器来完成我的工作。

Answer 1

您正在竞争异步get方法和下一页加载。 你可能应该在你的点击处理程序中返回false并在你的get请求的成功回调中转到下一页（如果这是你想要的）：

$('#Go').on('click', function (e) {
    e.preventDefault();
    $.get(url, function(data) {
        var html = '<img src="' + data + '" width="100" height="100"></img>';
        $('.EditorFrame').contents().find('body').append(html);
        // go to next page here
    });
    return false;
});

此外，width和height属性不应具有“px”，而应仅为数值