如何动态添加 jQuery 移动弹出效果到链接

how to dynamically add jquery mobile popup effect to links

本文关键字：链接 移动 jQuery 何动态 动态 添加      更新时间：2023-09-26

在jquery mobile中，我动态添加a标签，这些标签应该打开一个弹出窗口，如下面的例子所示。但由于它是动态添加的，jquery 移动效果不会影响它。我怎样才能让它像这样工作？

谢谢

<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Actions...</a>
<div data-role="popup" id="popupMenu" data-theme="b">
        <ul data-role="listview" data-inset="true" style="min-width:210px;">
            <li data-role="list-divider">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Disable</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
</div>

在页面初始加载后将任何 html 追加到页面中时，需要重新应用任何 jquery 函数，以便它们在事件发生时正常工作

例。。。

如果您当前有类似的东西：

    <script type="text/javascript">
    $(document).ready(function () {
      $('a').on('click', function () {
            //something
            return false;
        });
    });
    </script>

每当用户单击任何<>链接时，这将执行//something 操作。现在，您在文档准备就绪后加载新<>链接，上面的代码将不适用于新代码，因为当 javascript 应用上述代码时它不在页面上。

要解决此问题，您需要运行在加载>的新 

    <script type="text/javascript">
    $(document).ready(function () {
            somethingFunction();
        });
    });
    //this is where we put the code to apply an event, it is now recallable later on.
    function somethingFunction(){
    $('a').on('click', function () {
            //something
            return false;
        });
    }
    </script>

假设您正在通过 ajax 查询将新<> html 拉入，您需要在 ajax 查询成功后调用 somethingFunction（）

EG

$.ajax({
type: "POST",
url: "/action" ,
dataType: 'text',
success: function(data){
    $('.popups').html(data);
    somethingFunction(); // THIS IS WHERE IT APPLIES THE EVENT TO YOUR NEW HTML.
}
});

如果我理解正确，您希望动态添加按钮，从而产生示例中提出的样式：

class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a"

要在附加一些 HTML 后应用 jQuery Mobile 增强功能，您必须调用小部件创建方法：在这种情况下.button();（可以是.checkboxradio();、.listview();等）。

我放了一个JSFiddle，它演示了动态创建一个调用.button()的按钮并应用硬编码类（我认为这不是一件好事）。

jquery 移动文档中有一个演示 动态创建弹出窗口

接下来，我用javascript编写一个简单的html标签，然后附加到jquery移动页面中。

.html：

 <div data-role="page">
    <div data-role="content" id="forpopup">
    </div>
<div>

这是小提琴演示。

我希望这会有所帮助。

相关文章：