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>