Question

我有一个jquery移动网页。该页面包含一个listView，它是用jquery动态生成的。在这个列表的最后，我想要一个简单的按钮，当我点击它时，我只是提醒一些事情。

我的 HTML 代码如下所示：

<div data-role="page" id="Home">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" class="albums">      
            </ul> 

            <form>
                <button id="loadMoreAlbums">More Albums...</button>
            </form>         
        </div>      
</div>

您看到的按钮在动态生成的listView下是硬编码的。按钮的jquery就是这样简单：

$("#loadMoreAlbums").click(function(){
            alert("yeah i am loaging more!");
});

我现在有2个问题：

1）当我加载此页面时，首先加载该按钮，我可以看到它2-3秒，直到列表加载并且它在列表的末尾。我真的不喜欢这种行为，我希望在listView创建之后“创建”按钮，这样我就不会在页面中看到它了。然而，这不是一个真正的问题，只是出于美观的原因。

2）真正的问题是，当我按下按钮时，它不再只是提醒简单文本而已，而是再次“加载”页面，并使listView消失，只有按钮留在屏幕上。为什么它表现得那样？为什么要再次“加载”页面？我只是想让它提醒一些事情，或者做我的jquery告诉它做的事情。

Answer 1

从

更改HTML

<button>...</button>

到

<button type="button">...</button>

默认情况下，<button>元素有type="submit"，并会在点击时提交表单。

http://www.w3.org/TR/html5/forms.html#the-button-element

Answer 2

$("#loadMoreAlbums").button().click(function(e){
    e.preventDefault();
    alert("yeah i am loaging more!");
});

该按钮用作提交。通过添加e.preventDefault();，您可以暂停提交操作。

jquery mobile中的按钮无法按预期工作

2 个答案: