绑定到 jquery 功能问题

Question

我在 EcmaScript 6 class 中使用 JQuery，我有一个事件函数，它在 class 的实例化时触发，并且该事件包含不同的 JQuery需要与 Class 交互的事件，所以我执行 .bind() 来实现这一点，所有工作正常，除了一个事件由于某种原因覆盖了属于 jquery 元素 "this"我用 .bind(that) 方法传递的 "that" 是我的代码（除此事件外一切正常）：

var that = this;
$(document).on('click', '[select-file]' , function(event) {
event.preventDefault();


console.log(this);

}.bind(that));

所以控制台日志给了我父元素 class 而不是 jquery 元素这按预期工作的地方：

            $(document).on('click', '[open-file-dialoge]', function(event) {
                event.preventDefault();
                  $('[file-dialoge]').modal('show');
                  if ($(this).attr('mitiupload') == 'false') {
                    // check if multiple upload is disabled
                    that.multiUpload = false;
                    $(this).removeAttr('multiple');
                  }
                  that.insertFiles();
            }.bind(that));

请帮忙，我不明白这是怎么回事，即使它们之间没有太大区别，也无法按预期工作；(

Answer 1

Function#bind() 在函数中更改 this 的上下文。如果你想要当前元素，你可以使用 event.currentTarget

var that = {};
$(document).on('click', 'button', function(event) {
  event.preventDefault();
  var el = event.currentTarget;

  console.log('this=', this);
  console.log('el=', el)

}.bind(that));

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

绑定到 jquery 功能问题

Bind to jquery function issue

javascript

jquery

ecmascript-6

webpack

es6-class