Why is .change() not working for the twitter-bootstrap select?

Question

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?

Answer 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.