javascript - 按下回车按钮时触发按钮

Question

我在这里使用此代码：

JS小提琴

我想要做的是当该行中的输入字段被聚焦并按下回车按钮时触发特定行的“添加”按钮。

据我所知，它有点像这样：

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

我试图让一些不同的东西工作，但这几乎是我用 Javascript 编写的第一个代码，我有点卡住了。谁能告诉我哪里出错了？

Answer 1

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

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

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

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

Answer 2

你没有元素 which 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>