2012-04-15 7 views
23

자바 스크립트/jQuery 스 니펫을 작성하여 확인란을 변경했습니다. http://jsfiddle.net/johnhoffman/crF93/동적으로 확인란을 변경하면 양식 변경 이벤트가 트리거되지 않는 이유는 무엇입니까?

자바 스크립트

$(function() { 
    $("a").click(function() { 
     if ($("input[type='checkbox']").attr('checked') == "checked") 
      $("input[type='checkbox']").removeAttr('checked'); 
     else 
      $("input[type='checkbox']").attr('checked', 'checked'); 
     return false; 
    }); 

    $("input[type='checkbox']").change(function(){ 
     console.log("Checkbox changed.");    
    });  
});​ 

HTML이

<input type="checkbox" /> 
<a href="#">Change CheckBox</a>​ 

흥미롭게도, 링크를 클릭하면 텍스트 상자를 변경하지만, 크롬에 메시지를 기록하는 기능을 호출하는 형태로 변경 이벤트를 트리거하지 않습니다 웹 개발자 콘솔. 왜? 어떻게해야합니까?

+0

[제어 입력 포커스를 잃고 그 값이 이후에 변경되었을 때 "변경 이벤트 발생 포커스를 얻을 수 있습니다.]] (http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) 포커스 변경이 없으면 변경 이벤트가 발생하지 않습니다. –

+0

가능한 복제본 [onchange 이벤트는 변경 사항이 antoher 함수에서 왔을 때 실행되지 않습니다] (http : // stackoverflow.co.kr/questions/7055729/onchange-event-not-fire-when-the-antoher-function에서 변경) –

답변

24

해당 이벤트는 변화가 일어난 것을 알고, 그래서 당신은, 변경 이벤트, .trigger('change')를 트리거 할 필요가있다. http://api.jquery.com/change/에서

:

설명 : "변화"자바 스크립트 이벤트에 이벤트 처리기를 바인딩하거나 요소에 해당 이벤트를 트리거.

이 방법은 처음 두 변형에서 .on("change", handler)의 단축키이며 세 번째 변형에서는 .trigger("change")입니다.

change 이벤트는 값이 변경되면 요소로 전송됩니다. 이 이벤트는 <input> 개의 요소, <textarea> 개의 상자 및 <select> 개의 요소로 제한됩니다. 선택 상자, 체크 상자 및 라디오 단추의 경우 사용자가 마우스로 선택하면 이벤트가 즉시 발생하지만 다른 요소 유형의 경우 요소가 포커스를 잃을 때까지 이벤트가 연기됩니다.

데모 :

http://jsfiddle.net/nPkPw/3/

는 체인 사용 : http://jsfiddle.net/nPkPw/5/
$("input[type='checkbox']").trigger('change').attr('checked', 'checked');

+1

은 클릭을 시뮬레이션하는 데 약간 장황하게 보입니다. – Sinetheta

+0

@Sinetheta Hiya cooleos가 조금 다듬을 것입니다. :) cheerios! –

+5

나중에 참조 할 수 있도록 attr 뒤에 트리거를 두어 스크립트가 변경 내용을 확인해야했습니다. – Yohn

10

이것은 놀랄만 한 일이 아니지만, 당신이 비 효과의 목록 in the msdn에 대해 이렇게 할 수 있다고 생각합니다.

  • "내용이 커밋되면이 이벤트가 발생하고 값이 변경되는 동안에는 발생하지 않습니다."
  • "선택한 개체의 선택한 옵션이 프로그래밍 방식으로 변경되면 onchange 이벤트가 발생하지 않습니다."

당신 수 언제나 .click()jsFiddle

관련 문제