具有 .data 和 html5 数据属性的 jQuery 自定义函数答案

【问题标题】：jQuery custom functions with .data and html5 data atributes具有 .data 和 html5 数据属性的 jQuery 自定义函数
【发布时间】：2013-04-14 09:31:05
【问题描述】：

我正在尝试在单击按钮时将新的“应用程序”附加到我的“应用程序列表”中。

$(".appCreate" ).click(newApp);

function newApp() {
    var facebookTemp = $("#facebook-template").html();

    var appName = $(this).data("appName");
    var appSize = $(this).data("appSize");
    var appTemp = $(this).data("appTemp");

    $("<div class=\"app" + appName + appSize + "\"></div>").html(appTemp).appendTo(".AppList");
};

HTML

<body>

    <section id="AppBox">
        <div class="AppList">

<!-- == Facebook == -->
            <div id="facebook-template">
                <div class="App facebook Size170x290">
                    <h1>Hello Test</h1>
                </div>
            </div>
        </div>
    </section>

<!-- == Settings == -->
    <section id="dialog-settings" class="dialog" title="Settings">
        <button data-appName="facebook" data-appSize="Size170x290" data-appTemp="facebookTemp" class="appCreate">
        Facebook</button>
    </section>
</body>

CSS

#facebook-template {
    display: none;
}
.facebook {
    background:linear-gradient(to bottom, #133783 0px, #102E6D 100%) repeat scroll 0 0 #133783;
}
.facebook { top:120px; left:0; }
#AppBox {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0;
}
.AppList {
    position:absolute;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.App {
    position:absolute;
    display:block;
    margin:5px;
    padding:0;
    box-shadow:0 0 5px 1px black;
    color:#FFFFFF;
    cursor:move;
}
.Size170x290 {height:170px;width:290px;}

基本上这个东西没有出现，我不知道是什么原因造成的。

【问题讨论】：

我希望反对票要求人们发表评论。您已提供代码。
你的html中.AppList在哪里？
您的 HTML 中是否有 AppList 类的元素？好像没有。
对不起，我因为某种原因漏掉了：Z
@MarcelGwerder 我已更新问题以包含其余代码。

标签： javascript jquery html onclick append

【解决方案1】：

您丢失了单击处理程序的上下文。

这是一个明显的第一个错误：

$(".appCreate" ).click(newApp);

第二个错误是数据名称。改为：

var appName = $(this).data("appname");

注意情况。将所有名称转换为小写。

由于 cmets 中的对话，我还添加了 handlebars.js。

新的工作代码：

$(".appCreate" ).click(newApp);

function newApp() {
    var facebookTemp = $("#facebook-template").html();

    var appName = $(this).data("appname");
    var appSize = $(this).data("appsize");
    var appTemp = $(this).data("apptemp");

    var template = Handlebars.compile(facebookTemp);
    var html = template({
        app : appName,
        facebook : appTemp,
        size : appSize
    });

    $(".AppList").append(html);
};

直播DEMO && CODE.

【讨论】：

点击功能仍然有效，但这是一种更好的方法。但这并没有解决我的问题。我现在将添加更多的 HTML 代码
感谢您的回答 :)
编辑帖子以解决其他问题。 GL :)
如果这不是你的意思，请纠正我。将 .html(appTemp) 更改为 .html(facebookTemp)。您可能应该使用像 handelbars.js 这样的模板引擎来替换模板值。或者，也许您现在可以使用 jQuery 更改值。
类似 jsfiddle.net/epyyP/1 注意我包含了 Handlebars 库。