0

I'm trying to use a .change() on this select, but I'm having trouble. I can't seem to get it to work.

<div class='btn-group twoColumn js-filter'>
    <button class='btn btn-info disabled'>Category</button>
    <a class='btn dropdown-toggle' data-toggle='dropdown' href='#' id='test'>
        <span class='btn_selected_value data-point-category'>
            All
        </span>
        <span class='caret'></span>
    </a>
    <ul class='dropdown-menu'>
        <li class='selectAll'>
            <a class='filter' data-filter='#filterCategoryId' data-value='All' href='#'>All</a>
        </li>
        <li>
            <a class='filter' data-filter='#filterCategoryId' data-value='test333' href='#'>test333</a>
        </li>
    </ul>
</div>

This console.log is not being fired:

$('.data-point-category').on('change', function() {
  console.log("what")
});

Where should I be placing the .data-point-cateogry class so I can use it via jQuery?

Artur Filipiak
  • 9,027
  • 4
  • 30
  • 56
Jay
  • 928
  • 2
  • 7
  • 28
  • what is changing that you need to fire a function for? – Funk Doc Aug 20 '15 at 17:18
  • 2
    That's not a `select` element, it's a bunch of HTML elements. `change` is fired by some native form elements like `select` and `input` only. – Teemu Aug 20 '15 at 17:20
  • 1
    all you have are links and a button. nothing is changing. – Funk Doc Aug 20 '15 at 17:20
  • Sorry, but there is no – sdespont Aug 20 '15 at 17:21
  • Probably because it doesn't work on `span` element. You have to manually trigger the event. – Prakash Pandey Aug 20 '15 at 17:23
  • 1
    There are a few examples of adding events to the Bootstrap dropdowns on this question. Might help! http://stackoverflow.com/questions/11989146/event-handlers-for-twitter-bootstrap-dropdowns – samiz Aug 20 '15 at 17:25
  • Thanks, it looks like I can use these events. The problem is that i'm using bootstrap 2.3 and I don't think these examples apply. – Jay Aug 20 '15 at 19:28

1 Answers1

1

The change event will not fire on HTML changing.

From the jQuery documentation:

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Instead, you want something like the following:

$('.filter').on('click', function() {
  console.log("what")
});

This would do what you want every time the dropdown option is clicked, which is practically the same as the value changing.

Blunderfest
  • 1,854
  • 1
  • 28
  • 46