2012-06-06 5 views
2

을 사용하여 변경할 때 다음과 같은 몇 가지 코드가 감지 방법 :DIV 어린이 콘텐츠를 JQuery와

의미
<html> 
    <body> 
     <div id="product_descriptioncontent"> 
      <input type="text" id="a" /> 
      <textarea id="b" /> 
     </div> 
    </body> 
<html> 

, 내 사업부는 입력, 텍스트 영역 또는 이미지 중 하나를 포함합니다. 하지만 내 질문에 div에서 자식 값이 변경되면 변경 사항을 감지하는 방법이 무엇입니까?

+0

당신은 또한 이미지의 변화를 감지 뜻 여기

$(document).ready(function() { var propertyChangeUnbound = false; $("#product_descriptioncontent").children().bind("propertychange", function(e) { if (e.originalEvent.propertyName == "value") { alert("Value changed!"); //do other stuff } }); $("#product_descriptioncontent").children().bind("input", function() { if (!propertyChangeUnbound) { $("#product_descriptioncontent").unbind("propertychange"); propertyChangeUnbound = true; } alert("Value changed!"); //do other stuff }); }); 

는 jsfiddle 링크입니다? – VisioN

답변

3

onchange 이벤트 만 불을 요소가 포커스를 잃었을 때, 즉, 때 focus을 얻은 때와는 다른 value와 그것을 blur의.

나는 실시간으로 이러한 기능을 제공 할 수있는 기본 리스너 잘 모르는 것 같아요,하지만 당신은 keyup로, 현재 값을 저장하고 표준 키보드 이벤트에 대해 확인하기 위해 jQuery의 .data() 방법을 기동 시도 할 수 :

$(this).on('keyup mouseup blur', function(){ 
: 당신은 또한 추가 검사에 대한 여러 이벤트에 keyup를 매핑 할 수
$('#product_descriptioncontent').children().each(function() { 
    $(this).on('keyup', function() { 
     if ($(this).data('c_val') != $(this).val()) { 
      alert('value changed!'); 
      //do other stuff 
     } 
     $(this).data('c_val', $(this).val()); 
    }).data('c_val', $(this).val()); 
});​​ 

JSFiddle

단순히 $('#element').keyup()을 호출하는 것뿐만 아니라 사용자가 아무 것도 입력하지 않고 호출해야하는 경우 해당 요소에 대해 on 함수를 트리거합니다. =]

.on() jQuery 메서드는 jQuery 1.7+에서만 지원되며, 이전 버전에서는 .live()을 사용해야합니다.

+1

좋은 답변입니다! 나는 이걸 모르고 ... – corazza

+0

고마워요 =] 가장 좋은 사람은 이미 더 좋은 길을 가졌습니다. 나는 취침 전에 일을하는 자신의 방식을 게시하고 싶었습니다. P 내일은 무엇에 대해 받아 들여지는 대답을 확인할 것입니다. 가장 적합한 방법입니다. –

0

onchange 이벤트 수신기를 추가 할 수 있습니다.

<html> 
    <body> 
     <div id="product_descriptioncontent"> 
      <input onchange="somefunction(this)" type="text" id="a" /> 
      <textarea onchange="somefunction(this)" id="b" /> 
     </div> 
    </body> 
<html> 
3

당신이 뭔가를 할 수 있습니다

$('#a, #b').on('change', function() { 
    $('#product_descriptioncontent').css('border', '1px solid green') 
}); 
1

HTML5 input 이벤트를 하위 요소에 바인딩하여이를 수행 할 수도 있습니다. 9 미만의 IE 버전에서는 작동하지 않지만이 경우 propertychange 이벤트를 사용할 수 있습니다. 아래 코드는 IE9가 둘 다 처리 할 수 ​​있기 때문에 표준 input 이벤트를 더 잘 사용하기 때문에 IE9의 경우 propertychange 이벤트를 바인드 해제합니다. 이것은 부분적으로, 또 다른 유래 질문에 대한 답변을 기반으로 http://jsfiddle.net/yNxaW/

: Catch only keypresses that change input?