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”，而應僅為數值