jQuery'.change（）または.keyup（） 'の場合

82

jQueryを使用して、.change()または.keyup()が発生したときに関数を実行したいと思います。

このようなもの。

if ( jQuery(':input').change() || jQuery(':input').keyup() )
{
    alert( 'something happened!' );
}

編集

申し訳ありませんが、言及するのを忘れました。両方とも.change()、.keyup()範囲内にある変数のいくつかが必要です。

javascript jquery function

— cnotethegr8
ソース

2

イベントは「アクティブ」ではなく、発生します。

— StuperUser 2011年

need some of the variables to be in-scopeイベントの変数、またはこれらのイベントハンドラーを登録するときに使用している変数を意味しますか？イベントパラメータ（通常はe）でイベント変数を取得します。そうでない場合は、イベントが発生するまでウィンドウレベルまたは要素のデータに保持するか、クロージャを確認する必要があります。

— StuperUser 2011年

189

複数のイベントをスペースで区切ることにより、それらにバインドできます。

$(":input").on("keyup change", function(e) {
    // do stuff!
})

ここのドキュメント。

それがお役に立てば幸いです。乾杯！

— キーガンワトキンス
ソース

7

キーアップ時に値が変更されると、内部関数が2回呼び出されることに注意してください（ほとんどの場合）。それを処理するには、@ JoshuaBurnsの返信を参照してください。

— T30 2015年

しかし、「キーアップ」と「変更」の2回実行しています...なぜですか？

— Rahul Pawar 2018

6

（）の代わりに.bindの（）.on使用する必要があります

— StefanBob

23

ページコンテンツを動的に生成したり、AJAXを介してコンテンツを読み込んだりする場合は、次の例が実際に行うべき方法です。

AJAXリクエストなど、スクリプトが複数回読み込まれる場合の二重バインドを防ぎます。
バインドbodyはドキュメント上に存在するため、追加、移動、削除、および再追加された要素に関係なく、body指定されたセレクターに一致するすべての子孫は適切なバインドを保持します。

コード：

// Define the element we wish to bind to.
var bind_to = ':input';

// Prevent double-binding.
$(document.body).off('change', bind_to);

// Bind the event to all body descendants matching the "bind_to" selector.
$(document.body).on('change keyup', bind_to, function(event) {
    alert('something happened!');
});

注意してください！私はの使用を作ってるんだ$.on()し、$.off()むしろ他の方法よりも、いくつかの理由のために：

$.live()および$.die()は非推奨であり、jQueryの最新バージョンからは省略されています。
個別の関数を定義して（したがって、グローバルスコープが乱雑になる）、その関数を両方$.change()に$.keyup()個別に渡すか、呼び出された各関数に同じ関数宣言を渡す必要があります。ロジックを複製しています...これは絶対に受け入れられません。
要素がDOMに追加された場合、$.bind()作成時に要素に動的にバインドされません。したがって:input、DOMにバインドしてから入力を追加した場合、そのバインドメソッドは新しい入力にアタッチされません。次に、明示的にバインドを解除してから、DOM内のすべての要素に再バインドする必要があります（そうしないと、バインドが複製されてしまいます）。このプロセスは、入力がDOMに追加されるたびに繰り返す必要があります。

— ジョシュア・バーンズ
ソース

2行目は何をしますか？

— varun 2016

@VarunDasは、var bind_to = ':input';という変数作成bind_toなど、すべての入力タイプをつかむために選択されinput、textareaそしてbutton。

— Joshua Burns

特定の要素が必要な場合：var bind_to = '#myInput';ajax呼び出しはとにかく2回実行されます。なぜ？？？

— Pathros 2017

@Pathros例を見る必要がありますが、このスレッドはその場所ではありません。LinkedInか何かで私にメッセージを送ってください

— Joshua Burns 2017年

3

これを行う。

$(function(){
    var myFunction = function()
    {
        alert("myFunction called");
    }

    jQuery(':input').change(myFunction).keyup(myFunction);
});

— brenjt
ソース

change()keyup()ラップされたセットを返すので、それを連鎖させることができます。

— StuperUser 2011年

できた、できなかった。ありがとう。

— brenjt 2011年

チェーンはまた、DOMを介した2番目のクエリを排除します。

— キーガンワトキンス2011年

2

変更イベントとキーアップイベントをサブスクライブできます。

$(function() {
    $(':input').change(myFunction).keyup(myFunction);
});

myFunction実行したい関数はどこですか：

function myFunction() {
    alert( 'something happened!' );
}

— ダリン・ディミトロフ
ソース

1

それはイベントがどのように機能するかではありません。代わりに、発生したときに呼び出される関数を提供します。

$("input").change(function() {
    alert("Something happened!");
});

— アレックスターピン
ソース

0

単一の関数を作成し、両方に対して呼び出します。

function yourHandler(e){
    alert( 'something happened!' );        
}
jQuery(':input').change(yourHandler).keyup(yourHandler);

change（）およびkeyup（）イベント登録関数は元のセットを返すため、連鎖させることができます。

— StuperUser
ソース

0

キーアップイベント入力jquery

デモ用

$(document).ready(function(){  
    $("#tutsmake").keydown(function(){  
        $("#tutsmake").css("background-color", "green");  
    });  
    $("#tutsmake").keyup(function(){  
        $("#tutsmake").css("background-color", "yellow");  
    });  
});

<!DOCTYPE html>  
<html>  
<title> jQuery keyup Event Example </title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Fill the Input Box: <input type="text" id="tutsmake">  
</body>  
</html>

スニペットを展開

— 開発者
ソース

... OPを組み合わせkeyUpイベントと変更ソリューションを探していたにもかかわらず、単数形の例に感謝

— Burndog