当我尝试在 jquery 移动按钮下方添加时抛出 jquery 代码:
// insert new button to bf div (breackfast div)
$("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button" > Add new </a> ');
这并不意味着 Jquery 移动样式 (data-role="button") ??
下面是html:
<div data-role="collapsible-set" data-theme="i" data-split-icon="gear" data-split-theme="e">
<div data-role="collapsible">
<h3> Breackfast </h3>
<div id="bf" style="margin:0 !important;padding:0 !important; display:inline !important">
<ul data-role="listview" data-theme="i" ">
<li>
<input type="button" tabindex="@ViewBag.CurInt" id="bdelete" value="DeleteFood" onclick="bfd();"/>
</li>
</ul>
</div>
</div>
</div>
下面是 JQuery 代码(PLZ 注意:它调用服务并执行删除,但问题仅在于未将按钮呈现为 jquery 移动样式)
<script type="text/javascript">
function bfd() {
var fp = '/api/service?prsnIduser1&MealTime=2&CurDate='+ $("#bdelete").attr("tabindex");
$.ajax({
url: fp,
type: 'Delete',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function () {
$("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button" > Add new </a> ');
$("#bf a").buttonMarkup();
});
}
</script>
我在 google 和 stackoverflow 上做了很多搜索,但我在下面尝试但没有成功:
$("div[data-role=collapsible]").collapsible({refresh: true });
// or even add :
$("#bf").page();
// or
$("#bf a").buttonMarkup();
最佳答案
如果我没理解错的话,您想动态创建一个 jQuery Mobile
按钮并设置正确的样式。
这是一个有效的 jsFiddle
示例:http://jsfiddle.net/Gajotres/m4rjZ/
$(document).on('pagebeforeshow', '#index', function(){
// Add a new button element
$('[data-role="content"]').append('<a id="button" href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button">Button</a>');
// Enhance new button element
$('#button').button();
});
要了解有关 jQuery Mobile 如何处理动态添加的内容以及如何增强它的更多信息,请查看此 ARTICLE ,或找到它 HERE 强>。
这是官方 jQuery Mobile 按钮的链接 documentation .
关于jquery - 通过 javascript 代码以编程方式添加按钮后,在按钮上应用 JQuery 移动样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15635845/