javascript - 如何更改函数中包装的 jquery 事件处理程序中的 var 值？

Question

function canvasPlug(tab, curvesArg) {

  $('#gp_grid').change( function (e) {   
    e.preventDefault();
    e.stopImmediatePropagation();
    console.log(tab);
  });
}

$('#shapeButton').click(canvasPlug('shape'));
$('#profileButton').click(canvasPlug('profile'));

第一个调用记录“shape”。第二次调用记录“形状”和“轮廓”，就像被调用两次一样。我想每次使用同一变量的新值调用点击事件。

Answer 1

问题是每次调用 canvasPlug 时，都会向 gp_grid 元素添加一个新的事件处理程序。

由于您只需要最新值，因此可以使用 .off() 删除之前注册的处理程序。 - 在下面的代码片段中， namespace 用于确保不会错误地删除其他事件处理程序。

$('#shapeButton').click(function() {
  canvasPlug('shape')
});
$('#profileButton').click(function() {
  canvasPlug('profile')
});

function canvasPlug(tab, curvesArg) {
  $('#gp_grid').off('change.canvasPlug').on('change.canvasPlug', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    snippet.log(tab);
  });
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="shapeButton">shapeButton</button>
<button id="profileButton">profileButton</button>
<input id="gp_grid" />