jquery - 按回车键触发Onclick函数，有多种形式

Question

想法:我正在尝试使用 Enter 键从 #form1 中的提交输入触发 onClick 函数，而 Enter 键也不会触发 #form2 onclick 函数。

问题:我让这段代码可以工作，但问题是我的页面有 2 个表单，当我从第一个表单的输入字段中单击 Enter 时，它还会触发第二个表单的 onClick。

问题:有没有办法从第一个表单的输入字段中按 Enter 键而不触发第二个表单的 onClick？

注释:我在 StackExchange 中上下搜索并尝试了多个答案，但似乎没有一个能正常工作。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

   <script>
    function post1() {
        alert("Hey");
    }

    function post2() {
        alert("Hey Again");
    }
    </script>


<form id="form1">
 <input type="text" id="city1" class="form-control" required>
  </div><br />
  <br />
<input type="button" onclick="post1();" value="Post Ad!" id="sub1" class="btn btn-success btn-lg">
</form>

<form id="form2">
 <input type="text" id="city2" class="form-control" required>
  </div><br />
  <br />
<input type="button" onclick="post2();" value="Post Ad!" id="sub2" class="btn btn-success btn-lg">
</form>

<script>
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
    if(e.keyCode == 13) {
        e.preventDefault();
        $("#sub1").click();    
        return false;
    }
});
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
      if(e.keyCode == 13) {
          e.preventDefault();
          $("#sub2").click();    
          return false;
      }
});
</script>

如果我错过了给出此答案的帖子，我很抱歉，如果是这样，请有人向我引用该位置，以便我可以更好地理解这个问题并继续前进。提前谢谢您。

修复那些有同样问题的人!

感谢Jazzepi寻找答案!

更改 --> $(document).on('keyup keypress', 'form input[type="text"]', function(e) { ...
至 --> $(document).on('keyup keypress', 'form input[id="city1"]', function(e) {...

Answer 1

问题出在您的代码中。您已附加一个响应相同类型元素的事件委托(delegate)。因为两个监听器都有 form input[type="text"]，所以当您单击文档的子项并与该 css 选择器匹配的内容时，每个监听器都会触发。你需要一些能够区分两者的东西。除了您所拥有的之外，您还可以在每个 $.on 调用的第二个参数中尝试 #city1 和 #city2 。

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
    if(e.keyCode == 13) {
        e.preventDefault();
        $("#sub1").click();    
        return false;
    }
});

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
      if(e.keyCode == 13) {
          e.preventDefault();
          $("#sub2").click();    
          return false;
      }
});