Question

在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>

Answer 1

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

示例...

如果你现在有这样的东西：

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

每当用户点击任何＆lt; a＆gt;链接。现在您正在加载新的＆lt; a＆gt;文档准备好后链接进入，上面的代码将不适用于新代码，因为当javascript应用上述代码时，它不在页面上。

要解决这个问题，你需要运行在新的＆lt;之后再次执行//某事的函数。 a＆gt;已加载。

    <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>

假设您正在使用新的＆lt; a＆gt;通过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.
}
});

Answer 2

如果我理解正确，你想要以dinamically方式添加按钮，从而产生你的例子中提出的风格：

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()的按钮，并且还应用了硬编码类（我认为这不是一件好事）。 / p>

Answer 3

jquery移动文档中提供了一个演示Dynamically create popup

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

HTML：

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

这是Fiddle Demo。

我希望这会有所帮助。

如何动态地将jquery移动弹出效果添加到链接

3 个答案: