javascript - 将 $.proxy 与动态创建的元素一起使用

Question

我试图将点击事件绑定(bind)到动态创建的元素，通常工作正常，但是当我将 $.proxy 放入混合中时，它不再工作。我可以让 $.proxy 单独工作，并且我可以让动态元素上的点击事件也单独工作，但是当我尝试将它们组合在一起来做我需要的事情时，它不起作用。这是为什么？

selectProduct: function(){
    console.log("hello");
},

binds: function() {
    // When user selects a product
    $('#sfProductList').on('click', '.lm-fancy-select__option', function(){
        $.proxy(this.selectProduct, this);
    });
}

也尝试过

binds: function() {    
  // When user selects a product
  $('#sfProductList').on('click', '.lm-fancy-select__option', $.proxy(this.selectProduct, this));
}

如果元素不是动态创建的，那么这有效:

binds: function() {
    // When user selects a product
    $('#sfProductList .lm-fancy-select__option').on('click', $.proxy(this.selectProduct, this));
}

Answer 1

问题是由于 this 的范围造成的。在第一个示例中，它将是一个包含 .lm-fancy-select__option 的 Element 对象。在第二个示例中，它将是对包含 binds 属性的对象的引用。

I am expecting it to be a reference to the click event of .lm-fancy-select__option

在这种情况下，您可以从提供给事件处理程序的参数中检索事件，并在该范围内调用 $.proxy:

binds: function() {
  var _this = this; // get reference to parent object    
  $('#sfProductList').on('click', '.lm-fancy-select__option', function(e) {
    $.proxy(_this.selectProduct, e);
  });
}

但是值得注意的是，这是完全没有意义的。您只需向事件处理程序提供 selectPoduct 的引用即可简化此逻辑:

binds: function() {
  $('#sfProductList').on('click', '.lm-fancy-select__option', this.selectProduct);
}

现在，selectProduct 调用的范围将是元素本身，并且该函数可以通过提供的第一个参数来使用该事件。

var obj = {
  selectProduct: function(e) {
    console.log($(this).text());
  },
  binds: function() {
    $('#sfProductList').on('click', '.lm-fancy-select__option', this.selectProduct);
  }
}

obj.binds();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sfProductList">
  <div class="lm-fancy-select__option">Foo</div>
  <div class="lm-fancy-select__option">Bar</div>
</div>