on（'change'）功能不起作用答案

【问题标题】：on('change') function not workingon（'change'）功能不起作用
【发布时间】：2016-06-04 09:18:03
【问题描述】：

所以我要做的是根据用户选择的“category”更新“topic”选择。我要做的是在 ID 为“category-filter”的元素上观察属性“data-curr_filter”的更改事件。我的每个类别的 jQuery 都是通过 web-inspector 测试的，所以我相信它与函数的 .on('change') 部分有关（它不会触发 console.log）。代码如下：

搜索过滤器的 HTML：

<span id="category-filter" class="filter-select" data-target="filter_categories" data-curr_filter="all">
  All Categories &nbsp; <i class="fa fa-angle-down"></i></span>
filter by
<span class="filter-select" data-target="filter_topics">
  All Topics &nbsp; <i class="fa fa-angle-down"></i>
</span>

“主题”的 HTML：

<ul class="filter-list" id="filter_topics" aria-labelledby="filter_topics">
    <li data-val="affordability" data-cat="communities">Affordability</li>
    <li data-val="market_conditions" data-cat="communities">Market Conditions</li>

jQuery：

$(document).ready(function() {
  console.log("Hello Moto");
  $(document).on('change', '#category-filter', function() {

  console.log("Something change");

  if ($('#category-filter').attr('data-curr_filter') == 'all' ){
    $('#filter_topics li').show();
  }  

  if ($('#category-filter').attr('data-curr_filter') == 'communities'){
    //show all topics as a "blank slate" before altering the display elements according category
    $('#filter_topics li').show();
    //hide all the elements
    $('#filter_topics li').toggle();
    //show only the topics labeled with communities
    $('#filter_topics li[data-cat=communities').toggle();    
  } 
  ...

【问题讨论】：

try ' $("#category-filter[data-curr_filter]").on('change', function() {
你打算如何在 span 标签上触发 onchange 事件？
onchange 仅在表单控件元素的值更改时触发。
但它不是表单控件元素，如select 或input。
您是否使用了一个库来装饰 span 使其成为一个选择框？请指定哪个库。

标签： javascript jquery sorting filter

【解决方案1】：

回答：

只是做一个 onclick 工作...有点恼火我完全忽略了这一点。

 $(document).on('click', '#filter_categories li', function() {
    var selectedCategory = $(this).attr('data-val');

    if (selectedCategory == 'all' ){
      $('#filter_topics li').show();
    }

    if (selectedCategory == 'communities'){
        //show all topics as a "blank slate" before altering the display elements according category
        $('#filter_topics li').show();
        //hide all the elements
        $('#filter_topics li').toggle();
        //show only the topics labeled with communities
        $('#filter_topics li[data-cat=communities').toggle();    
      }
...

TL;DR 在我的问题下：

因为它是 <span> 而不是 <input>、<select> 或 <textarea> 元素，所以它没有 .on('change') 事件观察器。如果我想出答案，我会在这里发布。

【讨论】：

【解决方案2】：

试试这个：

  //$(document).ready(function() {
    $(function() {

  console.log("Hello Moto");

  //$(document).on('change', '#category-filter[data-curr_filter]', function() {
  $('#category-filter').change(function() {

    console.log("Something change");

    if ($('#category-filter').attr('data-curr_filter') == 'all') {
      $('#filter_topics li').show();
    }

    if ($('#category-filter').attr('data-curr_filter') == 'communities') {
      //show all topics as a "blank slate" before altering the display elements according category
      $('#filter_topics li').show();
      //hide all the elements
      $('#filter_topics li').toggle();
      //show only the topics labeled with communities
      $('#filter_topics li[data-cat=communities').toggle();
    } 
    ...`

【讨论】：

嗨奇文这不起作用，因为更改在非选择/文本区域/输入上不起作用
对于这些类型，您可以尝试键盘事件，例如：$('#id').keyup(function(){...});、.keydown(function(){...}); 或 .keypress(function(){...})。
我只是在选择 Category 作为函数的触发器时使用了一个 .on('click')