Javascript to jquery mobile：提交点击时更改值？答案

【问题标题】：Java script to jquery mobile: change value on submit click?Javascript to jquery mobile：提交点击时更改值？
【发布时间】：2012-12-22 09:41:19
【问题描述】：

大家好 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"); ？

【问题讨论】：

标签： javascript jquery html jquery-mobile mobile

【解决方案1】：

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

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

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

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

【讨论】：

嘿，谢谢您的回复，对不起，我只是 html/javascript/jquery 的初学者，但您能告诉我更多详细信息吗？我必须把 $("#show").button("refresh");我添加了 $("#show").click(function() { $(this).val('Refresh'); });到头。

【解决方案2】：

首先你需要了解一些关于 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();
        });    
    });

在我的示例中，index 是我的 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

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

【讨论】：