アイデア:私は、Enterキーを使用して#form1の送信入力からonClick関数を起動しようとしていますが、Enterキーも#form2 onclick関数を起動しません。
問題:このコードは機能しましたが、問題はページに2つのフォームがあり、最初のフォームの入力フィールドでEnterキーを押すと、2番目のフォームのonClickも起動することです。
質問:2番目のフォームのonClickを発生させずに、1番目のフォームの入力フィールドからEnterキーを押す方法はありますか?
注: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){...
To> $(document).on( 'keyup keypress'、 'form input [id = "city1"]'、function(e){...
問題はあなたのコードにあります。同じタイプの要素に応答するイベントデリゲートをアタッチしました。どちらのリスナーにも
form input[type="text"]
があるため、ドキュメントの子である何かをクリックすると、それぞれが起動し、そのCSSセレクターに一致します。 2つを区別できるものが必要です。あなたが持っているものの代わりに、あなたはあなたのあなたの$ .on呼び出しのそれぞれに2番目の引数で
#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;
}
});