如果使用jQuery添加或更改CSS类,如何触发事件? CSS类的变化是否会触发jQuery change()事件?
当前回答
change()在添加或删除CSS类或定义更改时不会触发。它会在选择框值被选中或未选中等情况下触发。
我不确定你的意思是如果CSS类定义被改变(这可以通过编程来完成,但很乏味,通常不推荐),或者如果一个类被添加或删除到一个元素。在这两种情况下,都没有办法可靠地捕捉到这种情况。
当然,您可以为此创建自己的事件,但这只能被描述为建议。它不会捕获不是你的代码。
或者,你可以覆盖/替换addClass()(等)方法在jQuery,但这不会捕获当它是通过香草Javascript(虽然我猜你可以替换这些方法太)。
其他回答
依我看,更好的解决方案是结合@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
});
});
还有一种不触发自定义事件的方法
一个jQuery插件来监视Html元素CSS的变化
从上面引用
手表插件通过连接到FireFox中的DOMAttrModified来工作, 到onPropertyChanged在Internet Explorer,或通过使用计时器与 setInterval来处理对其他浏览器更改的检测。 不幸的是,WebKit不支持DOMAttrModified一致在 目前,Safari和Chrome不得不使用较慢的速度 setInterval机制。
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');
});
好问题。我正在使用引导下拉菜单,需要在引导下拉菜单被隐藏时执行一个事件。当打开下拉菜单时,包含类名为“button-group”的div会添加一个类名为“open”;按钮本身有一个“aria-expanded”属性设置为true。当下拉菜单关闭时,“open”类将从包含的div中删除,aria-expanded将从true切换为false。
这让我想到了一个问题,如何检测类的变化。
使用Bootstrap,可以检测到“下拉事件”。在这个链接中寻找“下拉事件”。 http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp
下面是在引导下拉列表中使用此事件的快速示例。
$(document).on('hidden.bs.dropdown', function(event) {
console.log('closed');
});
现在我意识到这比被问到的一般问题更具体。但我想其他试图用Bootstrap下拉菜单检测打开或关闭事件的开发人员会发现这很有帮助。像我一样,他们最初可能只是尝试检测元素类的变化(这显然不是那么简单)。谢谢。
我建议您重写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
});
推荐文章
- 使伸缩项目正确浮动
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- 如何取消最大高度?
- 如何选择在最后一个子元素之前的元素?
- jQuery:执行同步AJAX请求
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery