When i click on a class i want to remove the class and add a new class to the element. Now when i release the mouse from the class i want to remove the new class added and replace with the old class.

This is only adding the new class but is not reversing the change when i take the mouse of.

<i class="fa fa-arrows"></i>


    $('.fa-arrows').mousedown(function(){
        $(this).removeClass('fa-arrows').addClass('fa-random');
    });

    $('.fa-random').on('mouseup',function(){
        $(this).removeClass('fa-random').addClass('fa-arrows');
    });

/

When i click on a class i want to remove the class and add a new class to the element. Now when i release the mouse from the class i want to remove the new class added and replace with the old class.

This is only adding the new class but is not reversing the change when i take the mouse of.

<i class="fa fa-arrows"></i>


    $('.fa-arrows').mousedown(function(){
        $(this).removeClass('fa-arrows').addClass('fa-random');
    });

    $('.fa-random').on('mouseup',function(){
        $(this).removeClass('fa-random').addClass('fa-arrows');
    });

https://jsfiddle/873k5pgg/

• javascript
• jquery

• 1 You fiddle link just takes to homepage. Perhaps you linked the wrong example? – Mark Meyer Commented Aug 11, 2015 at 15:19
• aha , sorry this is the link jsfiddle/873k5pgg – Matthew Smart Commented Aug 11, 2015 at 15:21
• because the event is not bound automatically when you change the class! The mousdown should be chained to the arrows... – epascarello Commented Aug 11, 2015 at 15:24

4 Answers 4

You can use event delegation:

$(document).on('mousedown', '.fa-arrows', function () {
    $(this).removeClass('fa-arrows').addClass('fa-random');
});
$(document).on('mouseup', '.fa-random', function () {
    $(this).removeClass('fa-random').addClass('fa-arrows');
});

jsFiddle example

What your jQuery does when this code is executed is: it looks for all .fa-arrows and binds the function to mousedown and it looks for all .fa-random and binds the other function to mouseup. This happens once, it is not magically re-evaluated everytime any class/the DOM changes. (That is where React/AngularJS/... e into play.)

You either have to re-evaluate the binds manually whenever the classes change (in the bound functions), or bind both to the same elements (I'd go with the latter):

$('.fa-arrows')
  .on('mousedown', function() {
    $(this).removeClass('fa-arrows').addClass('fa-random');
  })
  .on('mouseup', function() {
    $(this).removeClass('fa-random').addClass('fa-arrows');
  });

.fa-arrows { text-decoration: underline; }
.fa-random { color: red; text-decoration: line-through; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="fa-arrows">mousedown me</p>

Edit: that said, why not just use css?

p { text-decoration: underline }
p:active { color: red; text-decoration: line-through; }

<p>mousedown me</p>

You could set a variable to be true/false if it is clicked or not. Script will need to be altered if you're doing this multiple times on the same page.

var clicked = false;

$(document).on('mousedown', '.fa-arrows', function(){
    $(this).removeClass('fa-arrows').addClass('fa-random');
    clicked = true;
});

$(document).on('mouseup', function(){
    if (clicked) {
        clicked = false;
    	$('.fa-random').removeClass('fa-random').addClass('fa-arrows');
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn./font-awesome/4.3.0/css/font-awesome.min.css">
    <i class="fa fa-arrows"></i>

The reason this doesn't work is because the events are set at the start, and the mouseup event is set to .fa-random which doesn't exist at that moment.

Like j08691 said you can use event delegation from the document, or you could put the event ons .fa and it should work too:

$('.fa').mousedown(function(){
    $(this).removeClass('fa-arrows').addClass('fa-random');
});

$('.fa').mouseup(function(){
    $(this).removeClass('fa-random').addClass('fa-arrows');
});