2

你好 Stackoverflow 人！

我正在使用最新的 jquery mobile (1.2.0) 制作一个移动网站。我有一个表单，我希望提交按钮在单击时更改文本/值。我有一个在空 html 页面中工作的代码：

<body>
    <form method="get" action="/show.php?" target="showframe">
        <select name="week">
            <option value="1">Week</option>
        </select>
        <select name="id">
            <option value="1">ID</option>
        </select>
        <input type="hidden" name="type" value="2">
        <input type="submit" value="Load" id="show" onclick="javascript:document.getElementById('show').value='Refresh'"> 
    </form>
    <iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>

但是当我复制并通过我的 jquery 页面中的 submut 按钮时，它不会改变值。我的问题是：我如何让它在 jquery mobile 中工作？什么是替代方案？

提前致谢

编辑：

我试过jivings的答案，就是这样：

<html>

<head>
    <title>Infoweb Mobiel - Dominicus College</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
    <script src="js/style.js"></script>
    <script>
        $("#show").click(function () {
            $(this).val('Refresh');
        });
    </script>
</head>

<body>
    <form method="get" action="/show.php?" target="showframe">
        <select name="week">
            <option value="1">Week</option>
        </select>
        <select name="id">
            <option value="1">ID</option>
        </select>
        <input type="hidden" name="type" value="2">
        <input type="submit" value="Load" id="show" $("#show").button("refresh");> 
    </form>
    <iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>

但它不起作用..我认为我做错了什么。我必须在哪里以及如何放置$("#show").button("refresh");？

4

2 回答 2

0

这是因为您看到的文本实际上并不是按钮元素的一部分。JQuery Mobile 用它自己的元素填充按钮以创建您看到的样式。如果您希望它在进行更改时刷新这些元素，那么您需要调用refresh()按钮上的方法：

$("#show").button("refresh");

此外，由于这是 jQuery，您应该正确使用处理程序。您的 onclick 应该与 JavaScript 逻辑的其余部分一起使用，无论是在外部文件中head还是在外部文件中，如下所示：

$("#show").click(function() {
   $(this).val('Refresh');
});
于 2012-12-22T09:59:45.357 回答
0

首先你需要了解一些关于 jQuery Mobile 的知识：

  • 您在 EDIT 部分所做的事情是错误的，您不能在 HTML 块中使用 $("#show").button("refresh") 。Java 脚本不能与这样的 HTML 混合。

  • 这是一个应该如何工作的例子：http: //jsfiddle.net/Gajotres/K8nMX/。

代码：

    $('#index').live('pagebeforeshow',function(e,data){    
        $(document).on('click', '#show', function(){
            $('#show').attr('value','Show');
            $('#show').button("refresh");
            $('#custom-form').submit();
        });    
    });

在我的示例中，索引是我的 jQuery Mobile 页面的 id。Pagebeforeshow是在页面可以显示之前触发的事件：

    $('#index').live('pagebeforeshow',function(e,data){

您的按钮类型已更改为按钮。原因是，当表单将数据提交到 php 服务器时，您不能更改按钮文本（或其他任何内容）：

    <input type="button" value="Load" id="show">

这就是为什么我们将点击事件绑定到这一行中的按钮：

    $(document).on('click', '#show', function(){

下一行，我们正在更改按钮文本：

    <input type="button" value="Load" id="show">

因为这是一个 jQuery Mobile 样式的按钮，我们需要刷新他，以便可以应用新样式：

    $('#show').button("refresh");

最后我们触发表单提交：

    $('#show').button("refresh");

在继续之前，请阅读这篇文章：http: //jquerymobile.com/test/docs/api/events.html。在那里，您将找到您需要了解的有关 jQuery Mobile 页面事件的所有信息。

另请阅读这篇关于 jQuery Mobile 页面剖析的文章：http: //jquerymobile.com/test/docs/pages/page-anatomy.html

由于您是此页面的新手，请查看本文，它将帮助您在未来获得更好的响应。我希望这是对您问题的回答。如果您有更多问题，请随时发表评论。

于 2012-12-22T16:36:53.793 回答