jquery输入点击功能不触发

发布于 2024-12-28 23:09:10 字数 3956 浏览 0 评论 0原文

我尝试将脚本更改为以下内容，但它仍然没有触发事件..我错过了什么吗？

$('#page1').live('pageshow',function(event) { 
        $("#radioyes").click(function(){
            $("p").hide();
        });
});

我也尝试过 pagebeforecreate 但结果是相同的..:(

我正在尝试一个简单的 jquery 移动页面并在 chrome 便携式上进行测试。但是，在下面的代码中，输入单击事件不起作用我也尝试了 "input#radioyes" 作为 "div>fieldset>input#radioyes" 但仍然不起作用..

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Background check </title> 

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="images/touch-icon-iphone.png" /> 
    <link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png" /> 
    <link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone4.png" /> 

    <script type="text/javascript" src="jQuery/jquery.js"></script>
    <script type="text/javascript" src="jQuery/jquery.mobile.min.js"></script>
    <link rel="stylesheet" href="jQuery/jquery.mobile.min.css" />

    <!-- JQuery Date Picker components -->
    <link rel="stylesheet" href="jQuery/jquery.ui.datepicker.mobile.css" /> 
    <script src="jQuery/jQuery.ui.datepicker.js"></script>
    <script src="jQuery/jquery.ui.datepicker.mobile.js"></script>  

    <link rel="stylesheet" href="css/folo.css" />

    <script type="text/javascript">  

$('#page1').live('pageshow',function(event) { 
    $("#radioyes").click(function(){
        $("p").hide();
    });
});
    </script>  
</head> 

<body > 

<div data-role="page" id="page1" data-theme="a" data-title="PAGE1">
    <div data-role="header">
        <h1>"PAGE1"</h1>
    </div><!-- /header -->

    <div data-role="content" >  
    <p> Welcome. </p>

    <div id="SSN">
        <label for="basic">SSN:   </label>
        <input name="ssn" id="textSSN" value="" data-theme="a" />
    </div>
    <div id="first">     
        <label for="first">First Name:</label>     
        <input name="input_first" id="input_first" value="" data-theme="d" /> 
    </div> 
    <div id="last">     
        <label for="last">Last Name:</label>     
        <input name="input_last" id="input_last" value="" data-theme="d" /> 
    </div> 

    <button id="btn1">Click me</button>

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-role="fieldcontain">
            <legend>Have you used other last name?</legend>

            <input type="radio" name="radio-choice" id="radioyes" value="yes" />
            <label for="radioyes">Yes</label>
            <input type="radio" name="radio-choice" id="radio-no" value="No"  checked="checked" />
            <label for="radio-no">No</label>
        </fieldset>

    <div id="otherlast">
        <label for="otherlast">Other Last Name:</label>     
        <input name="input_otherlast" id="input_otherlast" value="" data-theme="d" /> 
    </div> 

    </div>


   <div id="dob">            
        <label for="date">Date Of Birth:</label>         
        <input type="date" class="datepicker" name="date" id="my_date" value="01/19/1975" text="01/19/1975" />     
    </div>

    </div><!-- /content -->


</div><!-- /page -->
</body>
</html>
</html>

该版本。的下载的jquery是~~1.7.1~~1.6.4，jquery mobile是最新版本。

原文

I tried changing the script to the following and it still doesn't trigger the event.. am I missing something?

$('#page1').live('pageshow',function(event) { 
        $("#radioyes").click(function(){
            $("p").hide();
        });
});

I also tried pagebeforecreate but the result is the same.. :(

I am trying a simple jquery mobile page and testing on chrome portable. However, in the following code, the input click event isn't working where as button click works. I also tried "input#radioyes" as "div>fieldset>input#radioyes" and still doesnt work.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Background check </title> 

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="images/touch-icon-iphone.png" /> 
    <link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png" /> 
    <link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone4.png" /> 

    <script type="text/javascript" src="jQuery/jquery.js"></script>
    <script type="text/javascript" src="jQuery/jquery.mobile.min.js"></script>
    <link rel="stylesheet" href="jQuery/jquery.mobile.min.css" />

    <!-- JQuery Date Picker components -->
    <link rel="stylesheet" href="jQuery/jquery.ui.datepicker.mobile.css" /> 
    <script src="jQuery/jQuery.ui.datepicker.js"></script>
    <script src="jQuery/jquery.ui.datepicker.mobile.js"></script>  

    <link rel="stylesheet" href="css/folo.css" />

    <script type="text/javascript">  

$('#page1').live('pageshow',function(event) { 
    $("#radioyes").click(function(){
        $("p").hide();
    });
});
    </script>  
</head> 

<body > 

<div data-role="page" id="page1" data-theme="a" data-title="PAGE1">
    <div data-role="header">
        <h1>"PAGE1"</h1>
    </div><!-- /header -->

    <div data-role="content" >  
    <p> Welcome. </p>

    <div id="SSN">
        <label for="basic">SSN:   </label>
        <input name="ssn" id="textSSN" value="" data-theme="a" />
    </div>
    <div id="first">     
        <label for="first">First Name:</label>     
        <input name="input_first" id="input_first" value="" data-theme="d" /> 
    </div> 
    <div id="last">     
        <label for="last">Last Name:</label>     
        <input name="input_last" id="input_last" value="" data-theme="d" /> 
    </div> 

    <button id="btn1">Click me</button>

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-role="fieldcontain">
            <legend>Have you used other last name?</legend>

            <input type="radio" name="radio-choice" id="radioyes" value="yes" />
            <label for="radioyes">Yes</label>
            <input type="radio" name="radio-choice" id="radio-no" value="No"  checked="checked" />
            <label for="radio-no">No</label>
        </fieldset>

    <div id="otherlast">
        <label for="otherlast">Other Last Name:</label>     
        <input name="input_otherlast" id="input_otherlast" value="" data-theme="d" /> 
    </div> 

    </div>


   <div id="dob">            
        <label for="date">Date Of Birth:</label>         
        <input type="date" class="datepicker" name="date" id="my_date" value="01/19/1975" text="01/19/1975" />     
    </div>

    </div><!-- /content -->


</div><!-- /page -->
</body>
</html>
</html>

Appreciate any help.. The version of Jquery is ~~1.7.1~~ 1.6.4 downloaded and the jquery mobile is the latest version.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

困倦 2025-01-04 23:09:10

您不能在 jquery mobile 这里有一个关于它的文档

另外这里还有一个类似问题

回复收藏 0 原文

七分※倦醒 2025-01-04 23:09:10

jQM 1.0 不支持 jQuery 1.7.x 请使用 jQuery 1.6.4 ( 来源 )
jQM 使用 pageInit()，而不是 $(document).ready() ( 来源 )

jQM 还向您的页面添加了额外的标记，因此 $(" p").hide(); 可能会按预期隐藏，但附加标记可能仍然可见。我建议对 span 元素使用 id

更新：

尝试这个

$('#page1').live('pageshow',function(event) { 
    $("#radioyes").bind( "change", function(event, ui) {
        $("p").hide();
    });
});

实时示例：

http: //jsfiddle.net/CZLcR/9/

无线电事件文档：

http://jquerymobile.com/demos/1.0/docs/forms/radiobuttons/events.html

jQM 1.0 does not support jQuery 1.7.x please use jQuery 1.6.4 ( Source )
jQM uses pageInit(), not $(document).ready() ( Source )

Also jQM adds additional markup to your page so $("p").hide(); might be hiding as expected but the additional markup might still be visible. I would suggest using an id for the span elements

UPDATE:

Try this

$('#page1').live('pageshow',function(event) { 
    $("#radioyes").bind( "change", function(event, ui) {
        $("p").hide();
    });
});

Live Example:

http://jsfiddle.net/CZLcR/9/

Docs for Radio Events:

http://jquerymobile.com/demos/1.0/docs/forms/radiobuttons/events.html

回复收藏 0 原文

~没有更多了~

关于作者

那请放手

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

jquery输入点击功能不触发

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

jquery输入点击功能不触发

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。