on.keypress only works for first input in html

Question

Why does this jquery work only on first input in html?

//check answer on ENTER keyboard press
$("body").on("keypress", "input:text[name=guesslogo]", function(e){
    if (e.keyCode == 13) {  
        $(this).siblings(".check").trigger("click");
    }
});

html, in this html example it only works on the last one :S

<article id="level-1" class="unlocked" style="position: absolute; display: block; top: 0px; opacity: 1;">
    <h2>Level: 1 - 3</h2>
    <figure>
        <a href="#1" class="answered"><img src="logos/1.png" width="60" height="60" alt="1"></a>
    </figure>
    <figure>
        <a href="#2" class="logo" style="opacity: 1;"><img src="logos/2.png" width="60" height="60" alt="2"></a>
        <figcaption id="2" style="display: none;">
            <a href="#" class="close">Close</a>
            <img src="logos/2.png" width="150" height="150" alt="2">
            <a href="#" class="hint">13</a>
            <input type="text" name="guesslogo" data-lang="ge">
            <a href="#" class="check">Check</a>
            <!-- <a href="#" class="clear">Clear</a> -->
            <a href="#" class="facebookask">Ask a friend on Facebook</a>
        </figcaption>
    </figure>
    <figure>
        <a href="#3" class="answered"><img src="logos/3.png" width="60" height="60" alt="3"></a>
    </figure>
    <figure>
        <a href="#5" class="answered"><img src="logos/5.png" width="60" height="60" alt="5"></a>
    </figure>
    <figure>
        <a href="#6" class="answered"><img src="logos/6.png" width="60" height="60" alt="6"></a>
    </figure>
    <figure>
        <a href="#8" class="answered"><img src="logos/8.png" width="60" height="60" alt="8"></a>
    </figure>
    <figure>
        <a href="#9" class="answered"><img src="logos/9.png" width="60" height="60" alt="9"></a>
    </figure>
    <figure>
        <a href="#10" class="answered"><img src="logos/10.png" width="60" height="60" alt="10"></a>
    </figure>
    <figure>
        <a href="#11" class="answered"><img src="logos/11.png" width="60" height="60" alt="11"></a>
    </figure>
    <figure>
        <a href="#12" class="answered"><img src="logos/12.png" width="60" height="60" alt="12"></a>
    </figure>
    <figure>
        <a href="#13" class="answered"><img src="logos/13.png" width="60" height="60" alt="13"></a>
    </figure>
    <figure>
        <a href="#14" class="answered"><img src="logos/14.png" width="60" height="60" alt="14"></a>
    </figure>
    <figure>
        <a href="#15" class="answered"><img src="logos/15.png" width="60" height="60" alt="15"></a>
    </figure>
    <figure>
        <a href="#16" class="answered"><img src="logos/16.png" width="60" height="60" alt="16"></a>
    </figure>
    <figure>
        <a href="#17" class="answered"><img src="logos/17.png" width="60" height="60" alt="17"></a>
    </figure>
    <figure>
        <a href="#18" class="answered"><img src="logos/18.png" width="60" height="60" alt="18"></a>
    </figure>
    <figure>
        <a href="#19" class="answered"><img src="logos/19.png" width="60" height="60" alt="19"></a>
    </figure>
    <figure>
        <a href="#20" class="answered"><img src="logos/20.png" width="60" height="60" alt="20"></a>
    </figure>
    <figure>
        <a href="#21" class="answered"><img src="logos/21.png" width="60" height="60" alt="21"></a>
    </figure>
    <figure>
        <a href="#22" class="logo" style="opacity: 1;"><img src="logos/22.png" width="60" height="60" alt="22"></a>
        <figcaption id="22">
            <a href="#" class="close">Close</a>
            <img src="logos/22.png" width="150" height="150" alt="22">
            <a href="#" class="hint">13</a>
            <input type="text" name="guesslogo" data-lang="ge">
            <a href="#" class="check">Check</a>
            <!-- <a href="#" class="clear">Clear</a> -->
            <a href="#" class="facebookask">Ask a friend on Facebook</a>
        </figcaption>
    </figure>
    <figure>
        <a href="#23" class="logo" style="opacity: 1;"><img src="logos/23.png" width="60" height="60" alt="23"></a>
        <figcaption id="23">
            <a href="#" class="close">Close</a>
            <img src="logos/23.png" width="150" height="150" alt="23">
            <a href="#" class="hint">13</a>
            <input type="text" name="guesslogo" data-lang="en">
            <a href="#" class="check">Check</a>
            <!-- <a href="#" class="clear">Clear</a> -->
            <a href="#" class="facebookask">Ask a friend on Facebook</a>
        </figcaption>
    </figure>
</article>

Please include your HTML, it's impossible to give an answer otherwise (even if I'm guessing that only your first input has name of guesslogo). — Chris Dixon, Apr 17 '13 at 14:06
does the first input in html have the attributes type="text" name="guesslogo" ? — cernunnos, Apr 17 '13 at 14:07
http://jsfiddle.net/fYg3m/ fiddle using your code, working perfectly. Well.. not your code... just the useful parts :P — cernunnos, Apr 17 '13 at 14:13
are you sure it is not working? your .check anchors has the same href of "#" — Huangism, Apr 17 '13 at 14:20

Chris Dixon · Accepted Answer · 2013-04-17T14:37:30.680

0

I've replicated and tested your code and it seems to work completely fine here:

http://jsfiddle.net/YeFVt/

$(document).on("keypress", "input:text[name=guesslogo]", function(e){
    console.log(e.keyCode);
    if (e.keyCode == 13) {  
        console.log('got here');
        $(this).siblings(".check").trigger("click");
    }
});

It may be to do with your .check link not working properly in your live code?

The final error was to do with the <input> tags not being closed.

edited Apr 17 '13 at 14:37

answered Apr 17 '13 at 14:13

Chris Dixon

9,147
5
36
68

Some of them work some not, can it have something to do with the fact that I load html via ajax call? so it is not physically inside the page. – Apr 17 '13 at 14:21
I think it's to do with your .check links having href of "#", so they're never going to go anywhere. It sounds like the .check links have a .click event attached to them, do a console.log() on this event to see if it's reaching the code. – Chris Dixon Apr 17 '13 at 14:23
check works fine, I've tested this extensively. Just onkeypress fails for some icons. – Apr 17 '13 at 14:23
I did, check, on the problematic icons, I don't get console.log(e.keyCode); – Apr 17 '13 at 14:24
Then, it may sound silly, but are you sure they're inside the tag? – Chris Dixon Apr 17 '13 at 14:24
And, the problematic "icons", are they ? – Chris Dixon Apr 17 '13 at 14:25
Ok, I uploaded it here: http://gamoicani.es/logo/ click on any logo and than ENter, you will see 90% of the time it works... the rest not. – Apr 17 '13 at 14:30
You're going to kick yourself for this. But I've just modified the HTML of your page, and by adding / to the end of your inputs, the code works fine. So you need rather than – Chris Dixon Apr 17 '13 at 14:37
Interesting, I was about to kick myself :) but in php I have Where is the / disappearing?? :S – Apr 17 '13 at 14:43
Not 100% sure, could you try ? – Chris Dixon Apr 17 '13 at 14:43
Tried that, same, in fact even if I try I still only see . I disabled GEOKBD jquery script that changes language for input, still the same... – Apr 17 '13 at 14:49
So strange, in fact, if you change the DOM of the broken element in any way... it works fine. – Chris Dixon Apr 17 '13 at 14:54
Thank you for your help, I accept your answer and will open new topic. I tried diagnosing but no avail. – Apr 17 '13 at 14:55
No problem, good luck, it sounds like it's going to be an odd case. – Chris Dixon Apr 17 '13 at 14:57

on.keypress only works for first input in html

1 Answers1

Linked