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

Question

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

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

我对服务器进行 ajax 调用来检索帮助文本并按如下方式处理它们:

// 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 位移出创建过程之外。

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

我做错了什么？

Answer 1

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

即使您可以专门编写 HTML 标记以在对话框中正常工作，attr("data-rel", "popup") 和 $.popup() code> 中有一些特殊的东西，除非有一个带有 data-role="content" 的父级，否则该表单将停止工作。由于对话框具有 data-role='main' 您无法以编程方式创建弹出窗口以用作对话框中的工具提示。

我目前在上面的文本中使用了跨度的标题属性，而不是 anchor 。

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