如果使用jQuery添加或更改CSS类,如何触发事件? CSS类的变化是否会触发jQuery change()事件?
当前回答
您可以绑定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/
其他回答
使用最新的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类required-entry是在$target 美元target.addClass(搜索类);
只是一个概念的证明:
查看要点,查看一些注释,并保持更新:
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');
无论何时在脚本中更改类,都可以使用触发器来引发自己的事件。
$(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触发器的更多信息
您可以绑定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/
如果您想检测类更改,最好的方法是使用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”监听器附加到你想观察的元素上。
推荐文章
- 样式化HTML电子邮件的最佳实践
- CSS可以在元素中的每个单词后强制换行吗?
- CSS/HTML:什么是使文本斜体的正确方法?
- 使用jQuery改变输入字段的类型
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 检查是否选择了jQuery选项,如果没有选择默认值
- 如何指定一个元素后包装在css flexbox?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 使用jQuery滚动到一个div
- 在JS/jQuery中触发按键/按键/按键事件?
- 如何每5秒重新加载页面?