Question

为什么这个jquery仅适用于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

<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>

Answer 1

我已经复制并测试了你的代码，它似乎在这里工作得很好：

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链接可能与您的实时代码无法正常工作有关吗？

最后一个错误与<input>标签未关闭有关。

on.keypress仅适用于html中的第一个输入

1 个答案: