Question

好吧，伙伴们，这似乎是最愚蠢的问题，但是正在帮助我完成这项工作的网站正在进行维护。我正处于学习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>

Answer 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会自动装配您的事件，前提是您已正确注释元素）。请注意这部分 - ＆gt; <a href="#page2" data-rel="dialog">bar</a>

选择listview jquery后如何显示警报

1 个答案: