jQuery의 CSS 클래스 변경에 대한 이벤트 실행 중
해야 합니까jQuery를 사용하여 CSS 클래스를 추가하거나 변경할 경우 이벤트를 발생하려면 어떻게 해야 합니까? CSS하면 jQuery됩니까가 합니까?change()트?
할 수 .trigger당신만의 이벤트를 하기 위해서 입니다.
$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged')
....
$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });
그렇지 않으면, 아니, 학급이 바뀌었을 때 이벤트를 해고할 수 있는 기본적인 방법은 없습니다.change()포커스 후에 발생하는 화재만이 입력이 변경된 입력을 남깁니다.
$(function() {
var button = $('.clickme')
, box = $('.box')
;
button.on('click', function() {
box.removeClass('box');
$(document).trigger('buttonClick');
});
$(document).on('buttonClick', function() {
box.text('Clicked!');
});
});.box { background-color: red; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Hi</div>
<button class="clickme">Click me</button>IMHO 더 나은 솔루션은 @RamboNo5와 @Jason에 의한 두 개의 답변을 결합하는 것입니다.
를 덮어쓰고 addClass 합니다 하는 것입니다.cssClassChanged
// Create a closure
(function(){
// Your base, I'm in it!
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function(){
// Execute the original method.
var result = originalAddClassMethod.apply( this, arguments );
// trigger a custom event
jQuery(this).trigger('cssClassChanged');
// return the original result
return result;
}
})();
// document ready function
$(function(){
$("#YourExampleElementID").bind('cssClassChanged', function(){
//do stuff here
});
});
클래스 변경을 탐지하려면 특성 변경을 완벽하게 제어할 수 있는 돌연변이 관찰자를 사용하는 것이 가장 좋은 방법입니다.그러나 청취자를 직접 정의하고 청취 중인 요소에 추가해야 합니다.좋은 점은 청취자가 추가되면 수동으로 어떤 것도 트리거할 필요가 없다는 것입니다.
$(function() {
(function($) {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
$.fn.attrchange = function(callback) {
if (MutationObserver) {
var options = {
subtree: false,
attributes: true
};
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(e) {
callback.call(e.target, e.attributeName);
});
});
return this.each(function() {
observer.observe(this, options);
});
}
}
})(jQuery);
//Now you need to append event listener
$('body *').attrchange(function(attrName) {
if(attrName=='class'){
alert('class changed');
}else if(attrName=='id'){
alert('id changed');
}else{
//OTHER ATTR CHANGED
}
});
});
이 예제 이벤트에서는 수신기가 모든 요소에 추가되지만 대부분의 경우에는 원하지 않습니다(메모리 저장).관찰할 요소에 이 "어트랙션" 청취자를 추가합니다.
addClass 함수를 무시하는 것을 제안합니다.이렇게 할 수 있습니다.
// Create a closure
(function(){
// Your base, I'm in it!
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function(){
// Execute the original method.
var result = originalAddClassMethod.apply( this, arguments );
// call your function
// this gets called everytime you use the addClass method
myfunction();
// return the original result
return result;
}
})();
// document ready function
$(function(){
// do stuff
});
개념 증명:
몇 가지 주석을 확인하고 최신 상태를 유지하려면 요점을 살펴봅니다.
https://gist.github.com/yckart/c893d7db0f49b1ea4dfb
(function ($) {
var methods = ['addClass', 'toggleClass', 'removeClass'];
$.each(methods, function (index, method) {
var originalMethod = $.fn[method];
$.fn[method] = function () {
var oldClass = this[0].className;
var result = originalMethod.apply(this, arguments);
var newClass = this[0].className;
this.trigger(method, [oldClass, newClass]);
return result;
};
});
}(window.jQuery || window.Zepto));
사용법은 매우 간단합니다. 관찰하려는 노드에 새 리스너를 추가하고 클래스를 평소와 같이 조작하기만 하면 됩니다.
var $node = $('div')
// listen to class-manipulation
.on('addClass toggleClass removeClass', function (e, oldClass, newClass) {
console.log('Changed from %s to %s due %s', oldClass, newClass, e.type);
})
// make some changes
.addClass('foo')
.removeClass('foo')
.toggleClass('foo');
최신 jquery mutation 사용하기
var $target = jQuery(".required-entry");
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === "class") {
var attributeValue = jQuery(mutation.target).prop(mutation.attributeName);
if (attributeValue.indexOf("search-class") >= 0){
// do what you want
}
}
});
});
observer.observe($target[0], {
attributes: true
});
// $target.addClass('search-class')와 같이 $target에 있는 class required-entry를 가진 div를 업데이트하는 코드.
change()CSS 클래스가 추가 또는 제거되거나 정의가 변경될 때 실행되지 않습니다.선택 상자 값이 선택되거나 선택 취소된 경우에 실행됩니다.
CSS 클래스 정의가 변경되었는지(프로그램적으로 수행할 수 있지만 지루하고 일반적으로 권장되지 않는) 또는 클래스가 요소에 추가 또는 제거되었는지 여부를 의미하는지 잘 모르겠습니다.어느 경우에도 이러한 현상을 확실하게 포착할 수 있는 방법은 없습니다.
물론 이벤트를 직접 생성할 수도 있지만 이는 조언으로 설명할 수밖에 없습니다.당신이 하지 않는 코드는 캡처하지 않습니다.
의/할 수 .addClass()(등) jQuery에서 메소드를 사용하지만 바닐라 자바스크립트를 통해 수행하면 캡처되지 않습니다(하지만 그 메소드들도 대체할 수 있을 것 같습니다).
사용자 지정 이벤트를 트리거하지 않는 방법이 하나 더 있습니다.
Rick Strahl에 의한 Html Element CSS 변경사항을 모니터링하기 위한 jQuery 플러그인
위에서 인용
와치 플러그인은 FireFox의 DOMAtrModified, Internet Explorer의 PropertyChanged에 연결하거나 다른 브라우저의 변경사항 탐지를 처리하기 위해 setInterval이 있는 타이머를 사용하여 작동합니다.유감스럽게도 현재 웹킷은 DOMAtrModified를 일관성 있게 지원하지 않기 때문에 사파리와 크롬은 현재 더 느린 setInterval 메커니즘을 사용해야 합니다.
좋은 질문입니다.부트스트랩 드롭다운 메뉴를 사용하고 있는데 부트스트랩 드롭다운이 숨겨져 있을 때 이벤트를 실행해야 했습니다.드롭다운이 열리면 클래스 이름이 "button-group"인 포함 div가 "open" 클래스를 추가하고, 버튼 자체가 true로 설정된 "aria-expanded" 특성을 가집니다.드롭다운이 닫히면 해당 클래스의 "open"이 포함된 div에서 제거되고 아리아 확장된 것이 true에서 false로 전환됩니다.
그래서 수업 변화를 감지하는 방법에 대한 질문을 하게 되었습니다.
부트스트랩을 사용하면 탐지할 수 있는 "드롭다운 이벤트"가 있습니다.이 링크에서 "Dropdown Events"를 찾습니다.http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp
부트스트랩 드롭다운에서 이 이벤트를 사용하는 신속하고 더러운 예는 다음과 같습니다.
$(document).on('hidden.bs.dropdown', function(event) {
console.log('closed');
});
이제 저는 이것이 일반적인 질문보다 더 구체적이라는 것을 깨달았습니다.하지만 부트스트랩 드롭다운으로 열리거나 닫히는 이벤트를 감지하려는 다른 개발자들도 이 문제에 도움이 될 것이라고 생각합니다.저처럼, 그들은 처음에는 단순히 요소 클래스 변경을 감지하려고 시도하는 길을 갈 수도 있습니다(분명히 그렇게 간단하지는 않습니다).감사해요.
특정 이벤트를 트리거해야 하는 경우 addClass() 메서드를 재정의하여 'classadded'라는 사용자 지정 이벤트를 발생시킬 수 있습니다.
여기 방법:
(function() {
var ev = new $.Event('classadded'),
orig = $.fn.addClass;
$.fn.addClass = function() {
$(this).trigger(ev, arguments);
return orig.apply(this, arguments);
}
})();
$('#myElement').on('classadded', function(ev, newClasses) {
console.log(newClasses + ' added!');
console.log(this);
// Do stuff
// ...
});
DOMSubtree Modified 이벤트를 바인딩할 수 있습니다.여기에 예를 추가합니다.
HTML
<div id="mutable" style="width:50px;height:50px;">sjdfhksfh<div>
<div>
<button id="changeClass">Change Class</button>
</div>
자바스크립트
$(document).ready(function() {
$('#changeClass').click(function() {
$('#mutable').addClass("red");
});
$('#mutable').bind('DOMSubtreeModified', function(e) {
alert('class changed');
});
});
어떤 사건이 수업을 바꿨는지 알고 있다면, 당신은 같은 사건에서 약간의 지연을 사용할 수 있고 수업을 위해 체크할 수 있습니다.예
//this is not the code you control
$('input').on('blur', function(){
$(this).addClass('error');
$(this).before("<div class='someClass'>Warning Error</div>");
});
//this is your code
$('input').on('blur', function(){
var el= $(this);
setTimeout(function(){
if ($(el).hasClass('error')){
$(el).removeClass('error');
$(el).prev('.someClass').hide();
}
},1000);
});
var timeout_check_change_class;
function check_change_class( selector )
{
$(selector).each(function(index, el) {
var data_old_class = $(el).attr('data-old-class');
if (typeof data_old_class !== typeof undefined && data_old_class !== false)
{
if( data_old_class != $(el).attr('class') )
{
$(el).trigger('change_class');
}
}
$(el).attr('data-old-class', $(el).attr('class') );
});
clearTimeout( timeout_check_change_class );
timeout_check_change_class = setTimeout(check_change_class, 10, selector);
}
check_change_class( '.breakpoint' );
$('.breakpoint').on('change_class', function(event) {
console.log('haschange');
});
언급URL : https://stackoverflow.com/questions/1950038/firing-events-on-css-class-changes-in-jquery
'programing' 카테고리의 다른 글
| 값이 NULL인 DATTIME에서 결과를 가져올 때 python mariadb 커넥터 오류 (0) | 2023.10.09 |
|---|---|
| With Embedded YouTube Video, Create Link that Jumps to Specific Time (0) | 2023.10.09 |
| php.ini 파일을 변경한 후 Apache를 다시 시작해야 합니까? (0) | 2023.10.09 |
| 단독 개발자를 위한 최고의 연속 통합 설정(.)NET) (0) | 2023.10.09 |
| printf()가 있는 문자열 중심 맞추기 (0) | 2023.10.09 |