Question

我正在尝试使用最少的标记动态创建弹出工具提示（因为最终会有很多标记）。

在我的标记中，我有<div id='help_roles-description'>...</div>

我对服务器进行ajax调用以检索helptexts并像这样处理它们：

// If there are helptext updates, setup them accordingly
if (typeof response.helptexts != "undefined") {
    for (var i = 0; i < response.helptexts.length; i++) {
        if(response.helptexts[i].html.length) {
            var help_label = $("#help_" + response.helptexts[i].id + "");
            if(help_label) {
                // First of call, create the popup
                help_label.closest('div[data-role=dialog]').append($("<div></div>")
                        .attr("id", "#helptext_" + response.helptexts[i].id + "")
                        .attr("data-role", "popup")
                        .addClass("ui-content")
                        .html(response.helptexts[i].html)
                        .trigger("create")
                        );

                // Store the html DOM that is inside the label, so we can wrap it in an anchor
                var html = help_label.html();
                help_label.empty();
                help_label.append($("<a></a>")
                        .attr("href", "#helptext_" + response.helptexts[i].id)
                        .attr("data-rel", "popup")
                        .addClass("helper_link")
                        .html(html)
                        );

                // Output happyness
                logger("Setting help for '" + "#helptext_" + response.helptexts[i].id + "" + "' to '" + response.helptexts[i].html+ "'");
            }
        }
    }
}

在一个示例中，id为roles-description。我没有使用id helptext_roles-description创建一个div，在响应中填充了html，我得到了这个：

<div style="display: none;" id="#helptext_roles-description-placeholder">
    <!-- placeholder for #helptext_roles-description -->
</div>

我尝试使用谷歌搜索，但我的搜索条件似乎很缺乏，而搜索占位符会在输入上带回很多东西。

我使用closest('div').prepend的位置我尝试追加，预先添加并直接附加到help_label，并将其添加到help_label.parent()

我甚至把.html和.trigger位取出来在创建过程之外。

我也尝试使用像$("<div id='...这样的id创建div但是我总是只获得占位符。

我做错了什么？

Answer 1

根据@Omar上面的评论，我做了一点挖掘。

即使您可以使用对话框专门编写HTML标记以使其正常工作，attr("data-rel", "popup")和$.popup()也会有一些特殊的内容可以阻止此表单生效，除非有父{{1} }}。由于对话框具有data-role="content"您无法以编程方式创建弹出窗口以用作对话框中的工具提示。

我目前在上面的文字中使用了跨度而不是锚点的title属性。

不幸的是，这不能在jquery中传递，但添加qtip会使这些工作变得更好。

在jquery mobile中动态创建弹出窗口

1 个答案: