javascript - 为什么 .change() 不适用于 twitter-bootstrap 选择？

Question

我尝试在此选择上使用.change()，但遇到了麻烦。我似乎无法让它工作。

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

这个console.log没有被触发:

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

我应该将 .data-point-cateogry 类放置在哪里，以便可以通过 jQuery 使用它？

Answer 1

change事件不会在 HTML 更改时触发。

来自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.

相反，您需要如下所示的内容:

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

每次单击下拉选项时，这都会执行您想要的操作，这实际上与值更改相同。