저희는 전자 상거래를 하고 있으며 JavaScript 프레임워크는 jQuery를 사용합니다. 개발 과정에서 위 제목에 나열된 문제인 div 콘텐츠의 변경 사항을 모니터링하는 방법에 직면했습니다.
최종 코드가 먼저 제공됩니다(관련 분석은 나중에 수행됩니다):
var title = $("b.facility");
var title = $('#title');//모니터링하려는 요소
title.bind ('DOMNodeInserted', function( e) {
alert('요소에는 이제 ' $(e.target).html());
});
문제 해결을 위한 아이디어는 다음과 같습니다. 먼저 jQuery 이벤트에서 Change() 메소드의 정의와 사용법을 살펴보겠습니다.
요소의 값이 변경되면 변경 이벤트가 발생합니다.
이 이벤트는 텍스트 필드, 텍스트 영역 및 선택 요소에만 적용됩니다.
change() 함수는 변경 이벤트를 트리거하거나, 변경 이벤트가 발생할 때 실행할 함수를 지정합니다.
참고: 선택 요소와 함께 사용하는 경우 옵션을 선택하면 변경 이벤트가 발생합니다. 텍스트 필드 또는 텍스트 영역과 함께 사용하는 경우 요소가 포커스를 잃을 때 이 이벤트가 발생합니다.
그런데 div 내용 변경에 대한 변경 방법에 대한 언급이 없다는 문제가 발생합니다.
후속 Baidu 키워드: jquery div 콘텐츠 변경: 결과 없음
계속, bing 키워드: jquery 듣는 방법 div 변경 관련 문서를 찾았습니다. http://stackoverflow.com/questions/2712124/jquery -listen -to-changes-within-a-div-and-act-according
대략적인 이해는 사용자 정의 이벤트를 사용하여 문제를 처리하는 것입니다. 채택된 코드는 다음과 같습니다.
$('#laneconfigdisplay').bind('contentchanged', function() {
// div 콘텐츠가 변경된 후 작업 수행
alert('woo');
})
// 위 함수가 호출됩니다.
$('#laneconfigdisplay').trigger ('contentchanged');
하지만 contentchanged가 무엇인지에 대한 설명은 없습니다.
bing 키워드: jquery 듣기 방법 div 변경 관련 문서 찾기
계속, bing 키워드: jquery contentchanged가 관련 문서를 찾았습니다. http://stackoverflow.com/questions/1449666/create-a-jquery-special-event-for-content-changed
이 문서에서는 contentchanged 콘텐츠 정의를 자세히 설명합니다. 코드는
jQuery.fn입니다. watch = function( id, fn ) {
returnthis.each(function(){
var self = this;
var oldVal = self[id];
$(self).data(
'watch_timer',
setInterval(function(){
if(self[id] !== oldVal) {
fn.call(self, id, oldVal, self[id]);
oldVal = self[id] ;
},100)
)
})
jQuery.fn.unwatch = function( id ) {
returnthis.each(function(){
clearInterval( $(this).data('watch_timer') );
})
맞춤 이벤트 만들기
코드 복사
코드는 다음과 같습니다. jQuery. fn.valuechange = function(fn) { returnthis.bind('valuechange', fn);
};
jQuery.event.special.valuechange = {
setup: function() {
jQuery(this).watch(' value', function(){
jQuery.event.handle.call(this, {type:'valuechange'});
}),
teardown: function() {
jQuery(this).unwatch('value');
}
};
이 솔루션이 완벽한 것 같습니다. 그런데 나중에 계속 확인해 보니 더 있는 것 같습니다. 간결하게 코드는 다음과 같습니다.
코드 복사
alert( 'element now contain: ' $(e.target).html());
});
이게 나에게 필요한 코드일 것 같은데, 해보세요! 좋아요