尝试使用.html（）在变量中编写HTML [英] Trying to write HTML in variable using .html()

问题描述

我试图将存储在变量中的HTML写入主容器，但是当我编写它时，主容器最终会变空。

我的控制台。记录了变量并且它包含了html，但是当我将它作为下一行中的 .html（）函数的参数/参数传递时，代码运行时，这个选择器的html是空的，而不是变量中的html。

这是重新创建问题需要做的事情：

1. 访问此页： https：// googledrive .com / host / 0BwJVaMrY8QdcTkxWSkpxRXFQU2c / KE_home.html
   
2. 将其中一张卡片向左或向右拖动


3. 6秒钟后，点击顶部通知中的撤消按钮或文本 证明主容器的html变空

我想要做的是在th之前恢复到html e卡被刷掉;因此，模拟撤消。

这里是创建通知的jQuery / javascript的一个片段

<$ p $ $。createNotification（{
horizo​​ntal：'center'，//水平居中通知
vertical：'top'，//顶部对齐通知
content：' < span style =cursor：pointer; margin-left：32px;>撤销↩< / span>'，//通知内容
持续时间：6000，// 6秒通知结束
点击：函数（）{//一旦点击后，通知该做什么
$（'＃main'）。html（mainHTML）; //写入html，这里是#main成为空
console.log（mainHTML）; //但是这个console.log显示mainHTML在变量
console.log（break-time！＃4）; // random调试行
var a = $（'。lastCardDragged'）。attr（'data-cardNumber'）; //从已经被sw过的卡片组中删除重写的卡片（var b = 0，c = swipedAwayCards.length; b< C;如果（swipedAwayCards [b] == a）{
swipedAwayCards.splice（b，1）;
休息;
}
};
/ *更多代码将卡片排序并将布局写入一列或两列* /
this.hide（）; //隐藏通知
}
}）;


解决方案

分配保存的标记的语句工作。但是，稍微远一些，代码会检测到窗口比某个阈值更宽，并且会清空main元素中的左和右容器。

I'm trying to write HTML stored in a variable to the main container, but when I write it, the main container ends up empty.

I console.logged the variable and it contains the html, but when I pass it as the argument / parametre of the .html() function on the next line, when the code is ran, the html of the selector is empty and not that html in the variable.

Here is what one needs to do to recreate the problem:

1. Visit this page: https://googledrive.com/host/0BwJVaMrY8QdcTkxWSkpxRXFQU2c/KE_home.html
2. Drag away one of the cards to the left or to the right
3. Within 6 seconds, click the undo button or text in the notification at the top
4. Witness the main container's html become empty

What I'm trying to do is revert back to the html before the card was swiped away; thus, simulating an undo.

Here it a snippet of the jQuery / javascript that creates the notification

$.createNotification({
    horizontal: 'center', // horizontally centre notification
    vertical: 'top', // top align notification
    content: 'Card Dismissed.<span style="cursor:pointer; margin-left:32px;">Undo ↩</span>', // content of notification
    duration: 6000, // 6 seconds notification lasts
    click: function () { // what to do on notification once it is clicked
        $('#main').html(mainHTML); // write the html, here is where #main becomes empty
        console.log(mainHTML); // but this console.log shows that mainHTML has the right HTML in the variable
        console.log("break-time! #4"); // random debugging line
        var a = $('.lastCardDragged').attr('data-cardNumber'); // removes rewritten card from an array of cards that have been swiped away
        for (var b = 0, c = swipedAwayCards.length; b < c; b++) {
            if (swipedAwayCards[b] == a) {
                swipedAwayCards.splice(b, 1);
                break;
            }
        };
        /* More code that sorts the cards and write the layouts into one or two columns */
        this.hide(); // hide notification
    }
});

解决方案

That statement that assigns the saved markup does work. However, a little farther on, your code detects that the window is wider than some threshold, and it empties out the "left" and "right" containers inside the "main" element.

这篇关于尝试使用.html（）在变量中编写HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！