search

jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.7k stars 2.41k forks source link

1-0b1 input type search bind with keyup gives no event http://jsfiddle.net/Kuyne/1/embedded/result/ #1889

Closed OwenBrotherwood closed 12 years ago

OwenBrotherwood commented 12 years ago

http://jsfiddle.net/Kuyne/1/

bind for keyup on input type search: produces no keyup event. bind for keyup on input type text: works

http://forum.jquery.com/topic/jquery-mobile-1-0b1-bind-with-keyup-problem

Problem on multiple platforms

1.0a4.1 of JQM works with the enclosed markup http://jsfiddle.net/TWdug/

<!DOCTYPE html>
<html>
    <head>
        <title>Test of keyup in Search</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>        

    </head>
    <body>
        <div data-role="page" id="appPage"> 
            <div data-role="content">
                The bind to input search does not produce an event unless one takes out jquery mobile ...<p>
                <input type="search" id="bing" >                  
                <div id="bang">Bang me</div><p>                             
                <input type="text" id="bong" >
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(document).ready(function(){
            var t;
            t=$('#bing').bind('keyup', function(){
                alert("Did keyup work ...?");
            });
            console.log(t);
            t=$('#bang').bind('click', function(){
                alert("Did click work ...?");
            });
            console.log(t);
            t=$('#bong').bind('keyup', function(){
                alert("Did keyup work ...?");
            });
            console.log(t);         
        });
    </script>

</html>
scytalezero commented 12 years ago

I'm experiencing this problem as well, tested on iOS 4.3.3 and Firefox 5.

barone commented 12 years ago

Since upgrading to 1.0b1 from 1.0a4.1 the 'keyup' and 'change' events do not fire on 'search' input types. Changing the type to 'text' does work.

OwenBrotherwood commented 12 years ago

http://forum.jquery.com/topic/jquery-mobile-1-0b1-bind-with-keyup-problem#14737000002511387 Looks like a timing issue Kicking off the binds with document ready may be too quick for JQM. Playing with the fiddle @ http://jsfiddle.net/Kuyne/1/light/ If one wraps the the binds in a function( doit) with a setTimeout(doit, 1), it gets the search to bind. Without the setTimeout: no bind to search .. http://jsfiddle.net/7EMZa/

(Also, if one places the bindings in the javascript section at jsfiddle, the search works: strange but true http://jsfiddle.net/Kuyne/2/ )

    <script type="text/javascript">
        function doit(){
            var t;
            t=$('#bing').bind('keyup', function(){
                alert("Did keyup work ...?");
            });
            console.log(t);
            t=$('#bang').bind('click', function(){
                alert("Did click work ...?");
            });
            console.log(t);
            t=$('#bong').bind('keyup', function(){
                alert("Did keyup work ...?");
            });
            console.log(t);         

        }
        $(document).ready(function(){
        setTimeout(doit, 1);
        });
    </script>
OwenBrotherwood commented 12 years ago

Added a fiddle that uses "latest" code instead of b1 so as to be nice :) Pt. still no events for search http://jsfiddle.net/jqPs5/

OwenBrotherwood commented 12 years ago

live contra bind

I have to understand "live": but the original code is now fiddled to use live and works...

http://jsfiddle.net/7pv9a/

OwenBrotherwood commented 12 years ago

Not sure if this is an issue or not: but it is tripping people. Should it be closed or commented on?

Due to other problems in code, live was not enough, used a live plus a timeout to get search to work

mojoaxel commented 12 years ago

I lost some hours to this issue too and have not found an workaround yet. Thank you OwenBrotherwood for providing the fiddles. I'll look into it in the next few days but help from the "gurus" would be warmly appreciated.

toddparker commented 12 years ago

Thanks for all the diagnostic info guys, we'll take a look.

OwenBrotherwood commented 12 years ago

Just a couple of notes: another topic about same problem @ http://forum.jquery.com/topic/keypress-handler-in-input-type-search : something to do with div usage ... but as I use ID in my markup, not sure of the "fix"

Otherwise, I am wrapping my "bind"/live statements in the following which seems to work.

$(document).ready(function(){ $('#appPage').live('pagecreate',function(){ // ok, JQM has finished markup so bind/live can be done

OwenBrotherwood commented 12 years ago

Think scot fixed issue when He redid widgets.