通过 javascript 代码以编程方式添加按钮后，在按钮上应用 JQuery 移动样式答案

【问题标题】：Apply JQuery mobile style on button after add the button programmatically by javascript code通过 javascript 代码以编程方式添加按钮后，在按钮上应用 JQuery 移动样式
【发布时间】：2018-12-04 15:08:52
【问题描述】：

当我尝试在 jquery mobile 按钮下方添加 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();

【问题讨论】：

这是你想要达到的吗？ jsfiddle.net/Palestinian/qYLVb

标签： jquery html css jquery-mobile jquery-mobile-button

【解决方案1】：

如果我对您的理解正确，您希望动态创建一个 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。

【讨论】：

我很抱歉地通知你它也不起作用，我以前试过这个！
那你做错了。如果它在示例中有效，它也必须在您的情况下有效。
我不想将它与'pagebeforeshow'绑定，我希望在任何人点击id为'bdelete'的按钮后完成
那就做吧，pagebeforeshow 事件在这里只是为了帮助示例工作。你唯一需要的是 $('#button').button();再看一个例子，我已经改了，你现在可以通过点击另一个按钮来添加按钮。

【解决方案2】：

您可以按照 Gajotres 的建议，通过调用 button() 方法“手动”创建按钮小部件。

但是，如果您想要一个不依赖于小部件类型的通用解决方案，您可以通过触发祖先元素上的 create 事件让 jQuery Mobile “赶上”新标记。

例如：

$("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button">Add new</a>')
        .trigger("create");

【讨论】：