Question

我正在将一些jquery函数移动到javascript对象中以清理一些代码。我的问题是，当我将方法放在我的对象的构造函数上时，我的事件处理程序似乎不响应事件，但如果我的处理程序是辅助方法并且不在对象的构造函数。

这是我的代码

function MyConstructor() {
    this.init();
    this.selectAllHandler();
}

MyConstructor.prototype = {
  init: function() {
    $(document).on('click', '#my_element', this.selectAllHandler);
  },
  selectAllHandler: function() {
    // some code in here
  }
}

使用此代码时，我的代码不会出错，并且在函数运行时放置console.log＆＃39}。但是当我试图点击该东西来触发处理程序时，它什么也做不了。

但是，如果我使用对象外部的方法将其构建为构造函数，它可以正常工作。喜欢这个

function MyConstructor() {
    this.init();
}

MyConstructor.prototype = {
  init: function() {
    $(document).on('click', '#my_element', selectAllHandler);
  }
}

function selectAllHandler() {
  // code that works fine
}

我做错了什么我不能在对象的原型中调用处理程序？

修改

这是我的新代码。现在的问题是，$(this)似乎是指构造函数，不再引用被单击的元素。

function MyConstructor() {
  this.init();
}

MyConstructor.prototype = {
  init: function() {
    $(document).on('click', '#my_element', this.selectAllHandler.bind(this));
  },
    selectAllHandler: function() {
        var checkboxes = $('.prospect_select_box');

        console.log($(this)); // => [MyConstructor]

        if (!$(this).prop('checked')) {
            console.log('here')
            checkboxes.prop('checked', false);
            $('#prospect-left-section').hide();
        } else {
            console.log('other here')
            checkboxes.prop('checked', true);
            $('#prospect-left-section').show();
        }
    }
}

Answer 1

您有两个感兴趣的对象：构造的对象和单击的元素。第一个需要找到方法selectAllHandler，第二个在该函数中使用$(this)。显然，他们两个不能同时this，所以你需要以不同的方式引用其中一个。

以下是你如何做到这一点。

＆＃13;

function MyConstructor() {
    this.init();
}

MyConstructor.prototype = {
  init: function() {
    var that = this;
    $(document).on('click', '#my_element', function () {
      that.selectAllHandler.call(this); 
    });
  },
  selectAllHandler: function() {
    $(this).text('clicked!');
  }
}
  
new MyConstructor();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="my_element">click me</button>

＆＃13;

注意如何使用call来确保selectAllHandler将this运行，并将this设置为jQuery作为元素传递的内容。

但是，如果您还需要在{/ 1>} setAllHandler内使用this 引用构造的对象，则以相反的方式执行此操作，并将其用作{{1} }，但通过传递给函数的事件对象引用被点击的元素：

＆＃13;
＆＃13;
function MyConstructor() { this.init(); } MyConstructor.prototype = { init: function() { var that = this; $(document).on('click', '#my_element', this.selectAllHandler.bind(this)); }, selectAllHandler: function(e) { var elem = e.target; $(elem).text('clicked ' + this.other); }, other: 'me!' } new MyConstructor();
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="my_element">click me</button>
＆＃13;
＆＃13;
＆＃13;

面向对象的jquery - 事件处理程序无法正常工作

1 个答案: