jQuery 'if .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

189

공백으로 구분하여 여러 이벤트에 바인딩 할 수 있습니다.

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

여기에 문서가 있습니다 .

도움이 되길 바랍니다. 건배!

— 키건 왓킨스
소스

7

키업시 값이 변경되면 내부 함수가 두 번 호출된다는 점에 유의하십시오 (거의 항상). @Joshua Burns 응답을 참조하십시오.

— T30 2015

그러나 그것은 "키업"과 "변경"을 위해 하나를 2 번 실행합니다 ... 왜?

— Rahul Pawar

6

대신에 () .bind의) (CSTE 연구진 사용해야

— 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에 입력을 추가하면 해당 bind 메서드가 새 입력에 연결되지 않습니다. 그런 다음 명시 적으로 바인딩을 해제 한 다음 DOM의 모든 요소에 다시 바인딩해야합니다 (그렇지 않으면 바인딩이 중복됩니다). 이 프로세스는 입력이 DOM에 추가 될 때마다 반복되어야합니다.

— 조슈아 번스
소스

두 번째 줄은 무엇을합니까?

— Varun

@VarunDas은 var bind_to = ':input';라는 변수 생성 bind_to과 같은 모든 입력 유형을 잡아 선택기이며 input, textarea그리고 button.

— 여호수아 화상

특정 요소를 원한다면 : var bind_to = '#myInput';어쨌든 ajax 호출은 두 번 실행됩니다. 왜???

— Pathros

@Pathros 나는 예를 볼 필요가 있습니다.이 스레드는 장소가 아닙니다. 나에게 링크드 인 또는 무언가에 메시지 쏴

— 여호수아 화상

3

이 작업을 수행.

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

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

— Brenjt
소스

change()그리고 keyup()당신은 체인 것을 할 수 있도록 포장 세트를 돌려줍니다.

— StuperUser

당신은 할 수 있습니다. 감사.

— brenjt

체인은 또한 DOM을 통해 두 번째 쿼리를 제거합니다.

— keeganwatkins

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

keyup 이벤트 입력 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가 결합 된

— 키업