on.keypress仅适用于html中的首次输入 [英] on.keypress only works for first input in html

问题描述

为什么这个jquery只在html中的第一次输入上起作用?

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，在此html示例中，它仅适用于最后一个:S

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>

推荐答案

我已经复制并测试了您的代码，在这里看起来完全可以正常工作:

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");
    }
});

可能与您的.check链接在实时代码中无法正常工作有关?

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

最后的错误与<input>标签未关闭有关.

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

这篇关于on.keypress仅适用于html中的首次输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！