Question

Hello 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");？

Answer 1

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

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

此外，由于这是jQuery，您应该正确使用处理程序。你应该在head或外部文件中使用其余的JavaScript逻辑，看起来像这样：

$("#show").click(function() {
   $(this).val('Refresh');
});

Answer 2

首先，您需要了解有关jQuery Mobile的一些内容：

您在编辑部分所做的是错误的，您无法在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();
        });    
    });

对于我的示例， index 是我的jQuery Mobile页面的id。 Pagebeforeshow 是在页面显示之前触发的事件：

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

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

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

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

    $(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

如果您是本页新手，请查看this文章，它将帮助您在将来获得更好的回复。我希望这是你问题的答案。如果您有更多问题，请随时发表评论。

Javascript to jquery mobile：改变提交点击的价值？

2 个答案: