2013-06-09 3 views
0

몇 가지 코드가 있습니다. 버튼을 클릭하면 메시지가 표시됩니다. IE에서는 작동하지만, ff 또는 크롬에서는 작동하지 않습니다. 이유는 무엇입니까? 내 가난한 영어로 죄송합니다.Jquery 값 변경 이벤트

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title> New Document </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
    <script> 
    $(function() { 
     $('#btn').on('click', function() { 
      $('#test').val(Math.random()); 
      $('#test').trigger('change'); 
     }); //missing ending } 
     $('#test').bind("change paste keyup", function() { // change to a proper listener 
      alert("abc"); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <input id="test" type="text" value="" /> 
    <!--   ^Specify a "type" -->  
    <input id='btn' value="tt" type="button" /> 
</body> 
</html> 
+0

어떤 메시지가 표시 되나요? 또한 코드에 구문 오류가 있습니다. IE에서 작동하는 방법을 잘 모르겠어요 – karthikr

+0

내 실수로 미안 해요, ''을 잃었습니다. '' –

+0

버튼을 클릭하면 경고가 표시됩니다. @karthikr –

답변

0

코드에서 몇 가지 오류가 있습니다. 두 번째로 입력 필드에서 듣고 있어야하는 이벤트는 "변경"이벤트입니다. 텍스트 필드에 포커스가 있고 그 값을 변경 한 다음 문서의 다른 곳을 클릭하면 (즉 포커스가 끊어 지거나 흐리게 표시됩니다.) 변경 이벤트가 발생합니다.

대신 할 수있는 일은 키 업과 같은 다른 이벤트를 듣거나 사용자 지정 변경 이벤트를 트리거하는 것입니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title> New Document </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 

    <script>  
    jQuery(document).ready(function($) { 
     $('#test').on('change', function() { 
      alert("abc"); 
     }); 

     $('#btn').on('click', function() { 
      $('#test').val(Math.random()).trigger('change'); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <input id="test" value="" /> 
    <input id="btn" value="tt" type="button" /> 

</body> 
</html> 

을 멀리 예 : "onclick을 = ..."HTML에서와 같이 호출 자바 스크립트 인라인에서 유지하려고 다음은 수정/수정 코드입니다. 요점은 JS, CSS 및 HTML을 분리하는 것입니다.

+0

버그를 말해줘서 고마워,하지만 dosent work.I는 "abc"때마다 ff 버튼을 클릭하면 페이지가 표시되기를 바랍니다. –

+0

입력 상자에 일부 데이터를 입력하면 경고 단추가 표시됩니다. 클릭시 알림을 받으려면 ff 메소드에서 알림을 추가해야합니다. – karthikr

+0

업데이트를 확인하십시오. – karthikr

1

첫째로, 당신은 FF 기능에 대한 닫는 대괄호를 놓치고 :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title> New Document </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
    <script> 
     $(function(){ 
      $("#test").bind("input propertychange",function(){ 
       alert("abc"); 
      }); 
     }); 
     function ff() 
       { 
       document.getElementById('test').value=Math.random(); 

    </script> 
</head> 
<body> 
    <input id="test"></input> 
    <input id='btn' value="tt" type="button" onclick="ff()" /> 
</body> 
</html>