按下回车按钮时触发按钮

Question

我在这里处理这个代码：

JS Fiddle

我想做的是，当这一行的输入字段聚焦并点击回车按钮时，触发特定行的"添加"按钮。

据我所猜测，它有点像这样：

$("#current").keyup(function(e) {
    if(e.keyCode == 13) {
        $("#add").submit();
    }
});

我试着让一些不同的东西发挥作用，但这几乎是我用Javascript编写的第一个代码，我有点卡住了。有人能告诉我哪里出了问题吗？

Answer 1

除了您的current ID不是唯一的之外，您还可以执行以下操作：

$(".current").keyup(function(e) {
    if (e.which == 13) {
        $(this).next("input.add").trigger("click");
    }
});

演示：http://jsfiddle.net/9sX6X/77/

（我将您的重复ID更改为current的类）

Answer 2

您没有id="add"的元素也许你想要按钮女郎

你可以使用

$（'this'）.next（'.add'）.trigger（'click'）；

Answer 3

好吧，首先几个元素不应该有相同的id。

然后，你发布的代码就是你想要的，替换

$("#add").submit();

通过

$(this).next().click();

（但还有其他方法可以获得按钮）

    //bind a function to the "keyup" event for the element of id "current"
    $("#current").keyup(function(e) {
            // if the key pressed is 13 (code for enter)
            if(e.keyCode == 13) {
                //trigger the click event on the next element (in this cas your button)
                $(this).next().click();
            }
        });

`

Answer 4

只需跟随这个小提琴：http://jsfiddle.net/9sX6X/81/

详细信息

<form name="input" class="form">
    <fieldset>
        <h4>Requirements</h4>
        <div class="copies"></div>
        <div class="line">
            <input id="current" type="text" name="content" placeholder="Requirement" />
            <input type="button" value="Add" class="add" />
        </div>
    </fieldset>
    <fieldset>
        <h4>Qualifications</h4>
        <div class="copies"></div>
        <div class="line">
            <input id="current" type="text" name="content" placeholder="Qualification" />
            <input type="button" value="Add" class="add" />
        </div>
    </fieldset>
    <fieldset>
        <h4>Benefits</h4>
        <div class="copies"></div>
        <div class="line">
            <input id="current" type="text" name="content" placeholder="Benefit" />
            <input type="button" value="Add" class="add" />
        </div>
    <fieldset>
</form>
<script>
//latest
var maxFields = 10;
function cloneLine(line){
    var nb = 1 + $(line).siblings(".line").length;
    if (nb < 10){
        $(line).clone().insertAfter(line).find("[type=text]").val("").focus();
    }
    else{
        alert("Maximum fields number reached ! ");   
    }
}
<script>
// Listen to "add" clicks
$(document).on("click", ".add", function(e){
    // Try to clone the line 
    cloneLine($(this).parent());
})
// Listen to [enter] in <input type="text>
.on("keypress", "input[type=text]", function(e){
    // Not [enter] pressed ? Do nothing
    if (e.keyCode != 13){
        return;
    }
    // From here, [enter] was pressed
    // Prevent form submission
    e.preventDefault();    
    // Try to clone the line 
    cloneLine($(this).parent());   
});
</script>