如果使用jQuery添加或更改CSS类,如何触发事件? CSS类的变化是否会触发jQuery change()事件?
当前回答
如果您想检测类更改,最好的方法是使用Mutation observer,它可以让您完全控制任何属性更改。但是,您需要自己定义监听器,并将其附加到您正在监听的元素。好消息是,一旦追加了listener,您就不需要手动触发任何事情。
$(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”监听器附加到你想观察的元素上。
其他回答
还有一种不触发自定义事件的方法
一个jQuery插件来监视Html元素CSS的变化
从上面引用
手表插件通过连接到FireFox中的DOMAttrModified来工作, 到onPropertyChanged在Internet Explorer,或通过使用计时器与 setInterval来处理对其他浏览器更改的检测。 不幸的是,WebKit不支持DOMAttrModified一致在 目前,Safari和Chrome不得不使用较慢的速度 setInterval机制。
您可以绑定domsubtremodified事件。我在这里加一个例子:
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');
});
});
http://jsfiddle.net/hnCxK/13/
change()在添加或删除CSS类或定义更改时不会触发。它会在选择框值被选中或未选中等情况下触发。
我不确定你的意思是如果CSS类定义被改变(这可以通过编程来完成,但很乏味,通常不推荐),或者如果一个类被添加或删除到一个元素。在这两种情况下,都没有办法可靠地捕捉到这种情况。
当然,您可以为此创建自己的事件,但这只能被描述为建议。它不会捕获不是你的代码。
或者,你可以覆盖/替换addClass()(等)方法在jQuery,但这不会捕获当它是通过香草Javascript(虽然我猜你可以替换这些方法太)。
如果您知道是什么事件首先改变了类,那么您可以对同一事件使用轻微的延迟,并检查类。 例子
//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);
});
http://jsfiddle.net/GuDCp/3/
无论何时在脚本中更改类,都可以使用触发器来引发自己的事件。
$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged')
....
$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });
但除此之外,没有固定的方法在类更改时触发事件。Change()仅在focus离开输入已被更改的输入后触发。
$(函数(){ Var按钮= $('.clickme') , box = $('.box') ; 按钮。On('点击',函数(){ box.removeClass(盒); $(文档).trigger(“buttonClick”); }); 美元(文档)。on('buttonClick',函数(){ box.text(“点击!”); }); }); .box {background-color:红色;} < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div class = "盒子" >嗨< / div > <button class="clickme">点击我</button>
jQuery触发器的更多信息
推荐文章
- 如何删除/忽略:悬停css风格的触摸设备
- HTML5文本区域占位符不出现
- 为iPad和iPhone设计输入按钮
- 我如何捕捉Ajax查询后错误?
- jQuery:什么是限制“数字”仅输入文本框的最佳方法?(允许使用小数点)
- 在window.setTimeout()发生之前取消/终止
- Div高度100%,并扩展到适合内容
- 当鼠标经过表中的一行时,将光标更改为手
- 检测当用户滚动到底部的div与jQuery
- 使用:before和:after CSS选择器插入HTML
- 检测视口方向,如果方向是纵向显示警告消息通知用户的指示
- 禁用从HTML页面中拖动图像
- CSS水平定心固定div?
- Jquery停止子事件触发父事件
- 如何样式dt和dd,使他们在同一行?