0

嗨，伙计们，这似乎是有史以来最愚蠢的问题，但帮助我解决这个问题的网站正在维护中。我正处于学习 jquery mobile 的早期阶段，需要一些帮助。

我在 html5 页面中有一个非动态的有序列表视图。我想在手机上显示一个警报（如 ios 上的弹出警报），向用户显示文本，然后他们可以单击确定关闭它以返回到有序列表视图。我的html是这样的。我希望当我从该列表中单击 Montview 时，例如在 iphone 上弹出一条警报，并为用户提供一些文本，然后他们单击确定将其关闭。

有人可以帮助我使用所需的 jquery 移动 javascript，就像我说我正在学习但后来网站关闭了。

谢谢

<head>
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="lib/jquery-1.6.4.js"></script>
    <script src="lib/jquery.mobile-1.1.0.js"></script>
    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
    <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>

<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Grounds</h1>
        </div>
        <div data-role="content">
            <ol data-role="listview" data-theme="c" data-inset="true">
                <li>
                    <a>Montview</a>
                </li>
                <li data-theme="b">
                    <a>Asquith</a>
                </li>
                <li>
                    <a>Button</a>
                </li>
                <li>
                    <a>Button</a>
                </li>
            </ol>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>Header</h1>
        </div>
        <div data-role="content"></div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>

4

1 回答 1

1

对不起，如果我误解了这个问题，但您是否正在寻找类似的东西？

// this will bind all of the items
$(function(){
    $("ol[data-role='listview']").click(function(){
        alert("woah!");
    });
});

编辑：如果你想为每个列表项绑定一个不同的事件，你需要给项目一个 id （或区分它们的东西，你也可以选择每个 - 浏览它们的内容并以这种方式区分它们，但是我会建议不要使用这种方法）。

        <ol data-role="listview" data-theme="c" data-inset="true">
            <li id="mountView">
                <a>Montview</a>
            </li>
            <li id="asquith" data-theme="b">
                <a>Asquith</a>
            </li>
            <li id="someButton">
                <a>Button</a>
            </li>
            <li>
                <a>Button</a>
            </li>
        </ol>

然后在你的javascript中：

$(function(){
    $("li#mountView").click(function(){
        alert("Mount View Event!!!");
    });

    $("li#asquith").click(function(){
        alert("Asquith Event!!!");
    });
});

编辑 2

在仔细检查您的 html 后，我注意到您添加了另一个“页面”部分。我怀疑您想在单击其中一个链接时打开此页面的内容。检查这个JSFIDDLE，你就会明白我的意思。（此解决方案甚至不需要代码，只要您正确注释了元素，jquery mobile 就会自动连接您的事件）。注意这部分-><a href="#page2" data-rel="dialog">bar</a>

于 2013-02-14T02:51:29.123 回答