Question

这是我到目前为止编写的代码

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Registration</title>
    <meta name="HandheldFriendly" content="True"/>
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />

    <link rel="stylesheet" media="all" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
    <script type="text/javascript" src="my.js"></script>


    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript">

    $('#mothertongue').live("change",function() {

   alert($(this).val());
});

    </script>
</head>

<body>

    <div data-role="page" data-theme="e" id="page3" data-add-back-btn="true">
        <div  data-theme="e" data-role="header">
            <h3></h3>
            <a href="index.html" class="ui-btn-right" data-icon="home" data-iconpos="notext"
            data-direction="reverse">Home</a>
        </div>
        <div data-role="content" style="padding: 15px">




                <div data-role="fieldcontain">
                    <label for="selectmenu3">
                        <p>
                            Mother Tongue
                        </p> </label>
                    <select name="mothertongue" id="mothertongue" >
                        <option selected="selected" value="-1">Select Mother Tongue</option>
                        <option value="Telugu">Telugu</option>
                        <option value="Kannada">Kannada</option>
                        <option value="Hindi">Hindi</option>
                        <option value="Marathi">Marathi</option>
                        <option value="Tamil">Tamil</option>
                        <option value="Assamese">Assamese</option>
                        <option value="Bengali" >Bengali</option>
                        <option value="Coorgi">Coorgi</option>
                        <option value="Dogri">Dogri</option>
                        <option value="English">English</option>
                        <option value="Garhwali">Garhwali</option>
                        <option value="Gujarati">Gujarati</option>
                        <option value="Kashmiri">Kashmiri</option>
                        <option value="Konkani">Konkani</option>
                        <option value="Kumaoni">Kumaoni</option>
                        <option value="Kutchi">Kutchi</option>
                        <option value="Magahi">Maithili</option>
                        <option value="Malayalam">Malayalam</option>
                        <option value="Manipuri">Manipuri</option>
                        <option value="Marwari">Marwari</option>
                        <option value="Nepali">Nepali</option>
                        <option value="Oriya">Oriya</option>
                        <option value="Punjabi">Punjabi</option>
                        <option value="Sindhi">Sindhi</option>
                        <option value="Tulu">Tulu</option>
                        <option value="Urdu">Urdu</option>
                    </select>
                </div>

                </div>


        </div>
    </div>

</body>
</html>

mothertongue的更改事件根本没有触发。我已经为改变事件编写了这个脚本，但它根本不会触发。

<script type="text/javascript">

    $('#mothertongue').live("change",function() {

   alert($(this).val());
});

    </script>

在这个问题上，我整晚都在拉头发。请帮助我，否则我可能会变成秃头:(

Answer 1

你可能想看一下 https://forum.jquery.com/topic/jquery-mobile-equivalent-of-document-ready

并使用类似

的内容

$('#PageId').live('pagecreate', function() {
    $('#element').click(function () {
        //Do something
    });
});

重要的是，代码必须放在链接到Jquery库和jquery.mobile之间，例如：

<script src="@Url.Content("~/Scripts/lib/jquery-1.7.1.js")" type="text/javascript"></script>
<script>MobileInit();</script>
<script src="@Url.Content("~/Scripts/lib/jquery.mobile-1.1.1.js")" type="text/javascript"></script>

Answer 2

由于您发布了指向实际网页的链接，因此Chrome开发者控制台中的错误似乎为Uncaught SyntaxError: Unexpected token ILLEGAL。

在十六进制编辑器中打开您的html文件。或者在alert（）调用之后和body标记之前删除并重新创建所有文本。

Answer 3

在jQuery 1.7中使用“委托”或甚至更好的“on”

http://api.jquery.com/live/

http://api.jquery.com/delegate/

http://api.jquery.com/on/

Answer 4

我有类似的问题。你的问题可能是'。''范围 - #mothertongu可能太具体了。尝试类似：

$('#PageID').on("change", '#mothertongue', function() {
   ...
});

在jQuery Mobile中提交表单时，请记住，默认情况是下一页中的ajax。因此，您的代码可能在最后一页上工作，但不是提交结果。看一下http://jquerymobile.com/demos/1.2.1/docs/forms/forms-sample.html您可能只需要将数据-ajax =“false”添加到表单标记。

更改事件未在jquery mobile中的选择菜单上触发

4 个答案: