jquery - 如何在选择listview jquery后显示警报

标签 jquery ios listview jquery-mobile alert

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

我在 html5 页面中有一个非动态的有序 ListView 。我想在手机上显示一个警报(就像 ios 上的弹出警报),向用户显示文本,然后他们可以单击“确定”关闭它以返回到有序 ListView 。我的html是这样的。我希望当我单击此列表中的 Montview 作为示例时,iPhone 上会弹出一个警报,其中包含一些供用户使用的文本,然后他们单击“确定”将其关闭。

有人可以帮我解决所需的 jquery mobile 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>

最佳答案

很抱歉,如果我误解了这个问题,但是您是否正在寻找类似的东西?

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

编辑: 如果你想为每个列表项绑定(bind)一个不同的事件,你需要给这些项目一个 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>

关于jquery - 如何在选择listview jquery后显示警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14866486/

相关文章:

php - 根据选定的单选按钮隐藏 div

javascript - 如何将动画应用于元素直到滚动到它?

ios - 在 Xcode 中多次自动运行测试用例

c# - ListView 中的项目没有行缩进

C# 动态添加按钮并用它发送事件参数

javascript - 用逗号分割字符串,但也要保留空字段

javascript - 滚动页面后如何将贴纸保持在相同位置而不固定它?

ios - 当 apple sdk 中没有任何 IBOutlets 时,为什么我必须向我的委托(delegate)添加 IBOutlet 标识符?

ios - 如何存储列表并从 iOS 的设置页面中清除它?

android - ListView 和 RecyclerView 标题项