입력 변경 jquery를 감지합니다.

Question

여러 개의 필드가있는 양식과 일부 jquery 모달 대화 상자 (팝업)가 있습니다.

필드 값 중 하나가 사용자에 의해 변경된 경우 열려있는 모든 팝업을 닫아야합니다.

나는 그것을 시도했지만합니다 ( change 이벤트 내가 콘솔에서 "테스트"를 얻을하지 않습니다 트리거되지 않습니다) 작동하는 것 같군하지 않습니다 어떻게

$("input[type='text']").change(function() { 
     console.log("test"); 
     $(".ui-dialog-content").dialog("close"); 
    }); 

어떤 생각을 그것을 해결할 수 있습니까?

Answer 1

이 갈 수있는 많은 아니지만, 당신은 알고있다 그 change 필드 흐림에만 발생? 입력 할 때 발사되지 않습니다. 또한 핸들러를 바인딩 할 때 요소가 없을 수도 있습니다. 페이지가 아직로드되지 않았거나 일부 요소가 비동기 적으로로드 되었기 때문일 수 있습니다. 동적으로 추가 된 요소는 작동하지 않습니다.

대신

$("#parent").on("change", "input[type='text']", function() { 
    console.log("test"); 
}); 

이 작동합니다 상위에 처리기를 바인딩 할 수 있습니다, 페이지가

$(function() { 
    // safe here 
}); 

또는 이벤트 처리기를 바인딩하기 전에 준비가되어 있는지 확인, 전자를 해결하려면 요소가 부모에 추가 될 때와 관계없이 이 값이 느리므로 body 또는 window

Answer 2

이 그냥 무작위 추측,하지만 당신은 시도 :

$("input[type='text']”).on('change', function() { 
    console.log("test"); 
    $(".ui-dialog-content").dialog("close"); 
}); 

나는 솔루션이 바로 가기 알고 그것은 작동해야하지만 나는 대신에이 작업을 몇 가지 요소를 보았다 지름길. 스크립트가로드 될 때 요소가 작성 될 때와 관련이 있습니다. 당신이 거짓에 AutoOpen을 사용할 때

Answer 3

그것은 작동

$("#dialog-1").dialog({ 
         autoOpen: false, // autoOpen to false 
        }); 

스크립트 :

$(function() { 
       $("#dialog-1").dialog({ 
        autoOpen: false, // autoOpen to false 
       }); 
       $("#dialog-2").dialog({ 
        autoOpen: false, 
       }); 
       $("#opener").click(function() { 
        $("#dialog-1").dialog("open"); 
       }); 
       $("#opener2").click(function() { 
        $("#dialog-2").dialog("open"); 
       }); 
       $("input[type='text']").change(function() { // input changes 
        console.log("test"); 
        $(".ui-dialog-content").dialog("close"); 
       }); 
      }); 

HTML :

<div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog1!</div> 
     <div id="dialog-2" title="Dialog Title goes here...">This my first jQuery UI Dialog2!</div> 
     <button id="opener">Open Dialog</button> 
     <button id="opener2">Open Dialog</button> 
     <input type="text" id="txt" value="" />