web-dev-qa-db-ja.com

jQuery 'if .change（）または.keyup（）'

JQueryを使用すると、.change()または.keyup()のいずれかが発生したときに関数を実行できます。

このようなもの。

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

編集

言及するのを忘れて申し訳ありません。 .change()と.keyup()の両方には、スコープの一部の変数が必要です。

javascriptjqueryfunction
72
cnotethegr8

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

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

docs ここ 。

それが役立つことを願っています。乾杯！

167
keeganwatkins

ページコンテンツを動的に生成したり、AJAXを介してコンテンツをロードしたりする場合は、次の例を実際に使用してください。

  1. AJAXリクエストのように、スクリプトが複数回ロードされる場合の二重バインディングを防ぎます。
  2. バインドはドキュメントの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()を使用しています。

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

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

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

ここで、myFunctionは実行する関数です。

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

これを行う。

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

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

それがイベントの仕組みではありません。代わりに、それらが発生したときに呼び出される関数を提供します。

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

キーアップイベント入力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>
1
Developer

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

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

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

0
StuperUser