use*_*060 239 jquery javascript-events
如果使用jQuery添加或更改了css类,我该如何触发事件？更改CSS类是否会触发jQuery change()事件？
Jas*_*son 222
无论何时更改脚本中的类,都可以使用a 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>Ara*_*ani 138
恕我直言,更好的解决方案是结合@ 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
});
});
Mr *_* Br 55
如果要检测类更改,最好的方法是使用Mutation Observers,它可以让您完全控制任何属性更改.但是,您需要自己定义侦听器,并将其附加到您正在侦听的元素.好的一点是,一旦附加了侦听器,您就不需要手动触发任何内容.
$(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
}
});
});
在此示例中,事件侦听器附加到每个元素,但在大多数情况下您不希望这样(保存内存).将此"attrchange"侦听器附加到您想要观察的元素.
Ram*_*No5 53
我建议你覆盖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
});
yck*_*art 21
只是一个概念证明:
查看要点以查看一些注释并保持最新:
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');
change()添加或删除CSS类或定义更改时不会触发.它会在选择或取消选择选择框值时触发.
我不确定你是否意味着CSS类定义是否已经改变(可以通过编程方式完成,但是很繁琐而且通常不推荐),或者是否为类添加或删除了类.在任何一种情况下都无法可靠地捕获这种情况.
你当然可以为此创建自己的事件,但这只能被描述为建议.它不会捕获不属于您的代码.
或者你可以覆盖/替换addClass()jQuery中的(etc)方法,但这不会捕获它是通过vanilla Javascript完成的(虽然我猜你也可以替换这些方法).
还有一种方法可以不触发自定义事件
一个jQuery插件,用于监视Rick Strahl的Html Element CSS更改
从上面引用
Watch插件的工作方式是将FireFox中的DOMAttrModified连接到Internet Explorer中的onPropertyChanged,或者使用带有setInterval的计时器来处理其他浏览器的更改检测.不幸的是,WebKit目前不支持DOMAttrModified,因此Safari和Chrome目前必须使用较慢的setInterval机制.
使用最新的jquery变异
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
});
//更新具有类必需条目的 div的代码,它位于$ target中,如$ target.addClass('search-class');
好问题.我正在使用Bootstrap Dropdown菜单,并且需要在隐藏Bootstrap Dropdown时执行事件.打开下拉列表时,类名为"button-group"的包含div会添加一个"open"类; 并且按钮本身具有设置为true的"aria-expanded"属性.关闭下拉列表时,将从包含div中删除该类"open",并将aria-expanded从true切换为false.
这让我想到了如何检测班级变化的问题.
使用Bootstrap,可以检测到"下拉事件".在此链接中查找"下拉活动". http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp
以下是在Bootstrap Dropdown上使用此事件的快速而肮脏的示例.
$(document).on('hidden.bs.dropdown', function(event) {
console.log('closed');
});
现在我意识到这比被问到的一般问题更具体.但我想其他开发人员试图通过Bootstrap Dropdown检测开放或关闭事件会发现这有用.像我一样,他们可能最初只是试图检测元素类的变化(显然不是那么简单).谢谢.
如果您需要触发特定事件，则可以重写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
// ...
});
您可以绑定DOMSubtreeModified事件。我在这里添加一个示例：
的HTML
<div id="mutable" style="width:50px;height:50px;">sjdfhksfh<div>
<div>
<button id="changeClass">Change Class</button>
</div>
的JavaScript
$(document).ready(function() {
$('#changeClass').click(function() {
$('#mutable').addClass("red");
});
$('#mutable').bind('DOMSubtreeModified', function(e) {
alert('class changed');
});
});