Question

想法：我试图使用回车键从＃form1中的提交输入触发onClick函数，而输入键也不会触发＃form2 onclick函数。

问题：我得到了这个代码，但问题是我的页面有2个表单，当我从第一个表单的输入字段点击输入时，它也会触发第二个表单的onClick。

问题：有没有办法从第一个表单的输入字段点击输入而不触发第二个表单的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获得答案！

更改 - ＆gt; $（文件）.on（＆＃39; keyup keypress＆＃39;，＆＃39;表单输入[type =＆＃34; text＆＃34;]＆＃39; ，功能（e ）{...
至 - ＆gt; $（文件）.on（＆＃39; keyup keypress＆＃39;，＆＃39;表单输入[id =＆＃34; city1＆＃34;]＆＃39; ，功能（e ）{...

Answer 1

当我运行您的代码时，我注意到您的函数定义中没有先前else子句的if子句。另外，尝试在提交事件而不是keypress或keyup事件上绑定这些处理程序，因为我认为如果没有提交按钮，就不可能阻止默认（阻止表单提交）。

Answer 2

问题在于您的代码。您已附加了响应相同类型元素的事件委托。因为两个侦听器都有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;
      }
});

按回车键以激活Onclick功能，具有多个表单

针对具有相同问题的人的修复程序！

2 个答案: