从 $(document).ready 或性别过滤器调用函数答案

【问题标题】：call a function either from $(document).ready or gender filter从 $(document).ready 或性别过滤器调用函数
【发布时间】：2017-10-13 15:57:59
【问题描述】：

我有一个名为createtable 的函数，它将gender 作为参数。当第一个时间页面加载时，我希望 $(document).ready 使用默认性别值触发该函数，然后当我选择性别过滤器时，我希望使用该值执行 createtable 函数。下面是代码：

$(document).ready(function() {
  var gender = 'all';

  $('.ranges ul li').click(function() {
    $(".dropdown-toggle span").text($(this).text());
    $('.ranges ul li').removeClass("active");
    $(this).addClass("active");
    switch ($(this).text()) {
      case 'All':
        gender = 'all';
        break;
      case 'Female':
        gender = 'f';
        break;
      case 'Male':
        gender = 'm';
        break;
      case 'Not Specified':
        gender = 'none';
        break;
      default:
        gender = 'all'
    }
    createtable(gender);
  });

  createtable(gender);
});

createtable 是在$(document).ready 范围本身中定义的函数。问题是第一次加载页面时，createtable 函数会执行一次，但是当我使用过滤器更改性别时，它会执行两次。

【问题讨论】：

你有嵌套的li 元素吗？这就是我能明白为什么您的点击处理程序会被触发两次的唯一原因。

标签： javascript jquery html node.js

【解决方案1】：

尝试停止事件传播

$(document).ready(function() {
  var gender = 'all';

  $('.ranges ul li').click(function(event) {
    event.stopPropagation(); //stop bubble up
    $(".dropdown-toggle span").text($(this).text());
    $('.ranges ul li').removeClass("active");
    $(this).addClass("active");
    switch ($(this).text()) {
      case 'All':
        gender = 'all';
        break;
      case 'Female':
        gender = 'f';
        break;
      case 'Male':
        gender = 'm';
        break;
      case 'Not Specified':
        gender = 'none';
        break;
      default:
        gender = 'all'
    }
    createtable(gender);
  });

  createtable(gender);
});

【讨论】：