我正在尝试以最少的标记动态创建弹出工具提示(因为最终会有很多)。
在我的标记中,我有 <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='...
但我总是只得到占位符。
我做错了什么?
最佳答案
根据上面 @Omar 的评论,我做了更多的挖掘。
即使您可以专门编写 HTML 标记以在对话框中正常工作,attr("data-rel", "popup")
和 $.popup()
code> 中有一些特殊的东西,除非有一个带有 data-role="content"
的父级,否则该表单将停止工作。由于对话框具有 data-role='main'
您无法以编程方式创建弹出窗口以用作对话框中的工具提示。
我目前在上面的文本中使用了跨度的标题属性,而不是 anchor 。
不幸的是,这不能在 jquery 中传递,但添加 qtip使这些工作变得更好。
关于javascript - 在 jquery mobile 中动态创建弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21499314/