代码之家 › 专栏 › 技术社区 › wickywills

对动态创建的元素使用$.proxy

jquery javascript

wickywills · 技术社区 · 6 年前

$.proxy 在混合中,它不再起作用。我可以得到单独工作,我可以让动态元素上的click事件也单独工作,但是当我尝试将它们组合在一起来做我需要的事情时,它不起作用。为什么会这样?

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));
}

1 回复 | 直到 6 年前

Rory McCrossan Hsm Sharique Hasan 6 年前

这个问题是由于 this . 在第一个示例中,它将是一个包含 .lm-fancy-select__option . 在第二个示例中,它将是对保存 binds 财产。

我希望它是对点击事件的引用 .lm-fancy-select\选项

在这种情况下,您可以从提供给事件处理程序的参数中检索事件并调用 $.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>