jquery - 通过jquery从元素中删除类时触发事件？

Question

我有一段代码，它使用 jquery 从 <div> 中删除一个类。 。当类被删除时，是否可以通过事件触发另一个 jquery 函数？

html

<div class="square"></div> <br/>
<div class="square test"></div><br/>
<div class="square"></div> <br/>
<div class="square"></div>
<button>test</button>

CSS

.square{
width: 100px;
height: 100px;
background-color: red;
}
.pink{
background-color:pink;
}

JavaScript

$(document).on("*changedtopink*", "div", function(){
   alert("it changed");
});
$(document).on("click","button",function(){
   $(".test").addClass("pink");
});

Answer 1

您可以trigger您自己的事件:

HTML

<div class="square"></div> <br/>
<div class="square"></div> <br/>
<div class="square"></div> <br/> 
<div class="square"></div>  

CSS

.square{
    width: 100px;
    height: 100px;
    background-color: red;
}

.rectangle{
    width: 200px;
    height: 100px;
    background-color: green;
}

jQuery

$("div").on("changedClass", function(){
    $(this).addClass("rectangle");
});

$(document).on("click", "div", function(){
    $(this).removeClass("square");               
    $(this).trigger("changedClass");
});

单击本例中的红色方 block 将删除 .square 类并触发我新定义的 changedClass 事件。此事件针对给定的 div 触发，并添加一个新类或 .rectangle。

<强> EXAMPLE

编辑:

HTML

<div class="square"></div> <br/>
<div class="square"></div> <br/>
<div class="square"></div> <br/> 
<div class="square"></div>  
<input type="hidden" value="N" />

jQuery

//When the input is changed, add the rectangle class
$("input").on("change", function(e, divEl){
    $(divEl).addClass("rectangle");
});

//when a div is clicked, trigger a change event for the input place holder.
$(document).on("click", "div", function(){             
    $("input").trigger("change", [this]);
});


//regualr click event for your div
$(document).on("click", "div", function(){             
    $(this).removeClass("square");
});

<强> EXAMPLE

还有一个 EXAMPLE 使用按钮。