javascript - 如何使用 jquery 选择器在 ECMA 6 中的类中定义事件？

Question

我已经使用新标准 ECMA6 定义了一个类，我想将所有点击事件和其他内容放入该类中。我怎样才能做到这一点？我搜索了几篇文章，但没有一篇提到如何做到这一点......我尝试像这样在构造函数上定义事件，但根本不起作用:

   class Grid{

        constructor(gridOptions) {
         this.grid_header='';
         this.grid_body='';
         this.grid='';   
         this.options=gridOptions;
         this.cacheDom();
         this.bindEvents();
         this.buildGrid();

       $( ".page" ).on( "click", function() {
               alert("hola");
             });


        }

        cacheDom() {
           this.$greeder = $(this.options.selector);
        } 

        bindEvents() {

        }

        buildGrid(page_number=1){


        }


    }

编辑:我希望每次触发该事件时，都执行我的类中的方法

Answer 1

ES6 不会改变 jQuery 和 DOM 事件以及事件处理程序的工作方式。

您当前所拥有的应该“有效”，即它应该为所有具有 .page 类名并在执行特定代码时存在于 DOM 中的元素添加一个点击处理程序。如果元素是在事件绑定(bind)后动态生成的，那么您的代码将无法工作，因为 DOM 中尚不存在目标元素。您应该使用事件委托(delegate)。

$('aStaticParentSelector').on('event', '.selector', handler);

参见Understanding Event Delegation .

如果您有一个类并且有由该类生成的元素，那么您应该考虑采用不同的方法来选择与类相关的元素。

class Foo {
   constructor() {
      this.$el = jQuery('<div class="page">').appendTo('.somewhere');
      this.$el.on('click', this.clickHandler.bind(this));
   }

   clickHandler(event) {
    // `this` keyword refers to the instance
    // `this.$el` => a jQuery wrapped element
    // `event.currentTarget` => the DOM element that is wrapped by jQuery in `this.$el`
   }
}

上面的代码使用Function.prototype.bind用于设置处理程序的 this 值。

请注意，ES6 类只是语法糖，并没有从根本上改变 JavaScript OOP 系统的工作方式。