如果使用jQuery添加或更改CSS类,如何触发事件? CSS类的变化是否会触发jQuery change()事件?
当前回答
依我看,更好的解决方案是结合@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突变
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(搜索类);
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');
});
change()在添加或删除CSS类或定义更改时不会触发。它会在选择框值被选中或未选中等情况下触发。
我不确定你的意思是如果CSS类定义被改变(这可以通过编程来完成,但很乏味,通常不推荐),或者如果一个类被添加或删除到一个元素。在这两种情况下,都没有办法可靠地捕捉到这种情况。
当然,您可以为此创建自己的事件,但这只能被描述为建议。它不会捕获不是你的代码。
或者,你可以覆盖/替换addClass()(等)方法在jQuery,但这不会捕获当它是通过香草Javascript(虽然我猜你可以替换这些方法太)。
无论何时在脚本中更改类,都可以使用触发器来引发自己的事件。
$(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触发器的更多信息
我建议您重写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
});
推荐文章
- 如何让元素被点击(对于整个文档)?
- 样式化HTML电子邮件的最佳实践
- CSS可以在元素中的每个单词后强制换行吗?
- CSS/HTML:什么是使文本斜体的正确方法?
- 使用jQuery改变输入字段的类型
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 检查是否选择了jQuery选项,如果没有选择默认值
- 如何指定一个元素后包装在css flexbox?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 使用jQuery滚动到一个div
- 在JS/jQuery中触发按键/按键/按键事件?