Change Class on first click of a button that opens a dropdown menu?

Question

Am looking to have a button's icon class change only on the first click of the button event, which would also ajax .put a field to the db..

<div class="btn-group check-btns checkIt">
    <button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
    <span class="glyphicon glyphicon-unchecked"></span>
    </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">List Item 1</a></li>
    </ul>
</div>

Tested this simple on.click first (http://jsfiddle.net/57268/1/), but thought that Bootstrap's built-in dropdown .open class toggle might prevent this..

$(document).ready(function () {

    $(function () {
    $('.checkIt').on('click', function () {

But changing it to listen to the dropdown being shown has yet to work either http://jsfiddle.net/57268/:

$(document).ready(function () {

    $(function () {
    $('.btn-group.check-btns.checkIt').on('show.bs.dropdown', function () {
            console.log('checkIt clicked');
            var $this = $(this);
          var $that = $(this).children('.check-btns').children('.btn').find('.glyphicon')
          if ($that.hasClass('.glyphicon-unchecked')) {
            $that.removeClass('.glyphicon-unchecked').addClass('.glyphicon-check');
            console.log('now checked icon');
            $this.removeClass('.checkIt').addClass('.checkedIt');
            console.log('now checkedIt class');
            alert('checked and checkedIt .. now an ajax .put call');
          }
      })
    });

});

Tushar Gupta - curioustushar · Accepted Answer · 2014-06-16 02:29:15Z

1

Try

Fiddle Demo

hasClass, removeClass, addClass takes className not selector

eg. $el.addClass('class') is correct but not $el.addClass('.class')

$(document).ready(function () {
    $('.checkIt').on('click', function () {
        console.log('checkIt clicked');
        var $this = $(this),
            $that = $(this).find('.glyphicon'); //changed to .find() only
        if ($that.hasClass('glyphicon-unchecked')) {
            $that.removeClass('glyphicon-unchecked').addClass('glyphicon-check');
            console.log('now checked icon');
            $this.removeClass('checkIt').addClass('checkedIt');
            console.log('now checkedIt class');
            alert('checked and checkedIt');
        }
    });
});

edited Jun 16, 2014 at 2:29

answered Jun 16, 2014 at 2:19

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

StackThis Over a year ago

Thanks for this.. It works nicely in the fiddle.. For whatever reason though, it has yet to log even the first checkIt clicked in the app.. Did forget to mention that this involves templating with handlebars, which may be intruding here.. So I tried binding it to the document (tends to be the solution with templating, but actually I just noticed that another addClass/removeClass focus event isn't working with the templating..quite curious - any suggestions?

Tushar Gupta - curioustushar Over a year ago

Check your code for this problem eg. $el.addClass('class') is correct but not $el.addClass('.class')

StackThis Over a year ago

first, thanks for that.. great catch.. Turns out it has to be bound to an element outside of the template for the click event eg. $(".exterior-template-element").on("click", ".checkIt", function () {

fstanis · Accepted Answer · 2014-06-16 02:26:19Z

0

To explain Tushar's solution, your original code had two problems:

The chain for defining $that used .children('.check-btns') - this looks for an element with class check-btns inside $this element children, but $this is actually the div that already has this class (you are looking for an element inside its own children).
In hasClass, you are looking for class ".glyphicon-unchecked" - this is incorrent, the class name is actually "glyphicon-unchecked", the dot is used only when you need a selector.

answered Jun 16, 2014 at 2:26

fstanis

5,6541 gold badge28 silver badges46 bronze badges

2 Comments

StackThis Over a year ago

Appreciate the pointers.. For whatever reason though, maybe something to do with templating (forgot to mention that this invovlves handlebars), even the first console.log has yet to appear.. any suggestions

StackThis Over a year ago

Turns out it has to be bound to an element outside of the template for the click event eg. $(".exterior-template-element").on("click", ".checkIt", function () {.. Thanks again

Collectives™ on Stack Overflow

Change Class on first click of a button that opens a dropdown menu?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related