使用jQuery通过添加/删除类来控制点击事件

Question

I currently have something like this code running:

function blah() {
jQuery(".class1").on("click", function() {
    jQuery(this).text('Validate').addClass('class2').removeClass("class1");
   //more stuff here
    jQuery(".class2").on("click", function() {
           jQuery(this).removeClass("class1");
           //More stuff here

This is bad because the click events propagate, every click that occurs adds the click event multiple times. I tried closing off the first selector (like so) and having the click events seperately but the second click event never occurred(!):

function blah() {
jQuery(".class1").on("click", function() {
    jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(".class2").on("click", function() {
           jQuery(this).removeClass("class1");
           //More stuff here

How do I structure code so that on the first click one thing happens, and the second click another thing happens without click events doubling

Answer 1

you need

jQuery(document).on("click", ".class1", function() {
    jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(document).on("click", ".class2", function() {
           jQuery(this).removeClass("class1");
           //More stuff here
});

Demo: Fiddle