Question

我在某个不可编辑的文件中有一个函数，它将点击处理程序绑定到某些项目，如下所示：

$("#container").on("click", ".editThis", function(e) {
    var elemID = this.id;
    // etc...
});

在另一个文件中，我尝试在执行函数之前检查它：

// Get event info
var clickEvent = $("#container").data('events').click[0];
var clickEvent_func = clickEvent.handler;
var clickEvent_selector = clickEvent.selector;

// Remove previous event and attach new one
$("#container").off("click", clickEvent_selector);
$("#container").on( "click", clickEvent_selector, function(e) {
    if (someValue) {
        clickEvent_func(e);
    } else {
        // Do something else
    }
});

由于原始函数不再有任何上下文（我猜），当我尝试运行它时，第一行出现错误。我该如何解决这个问题？或者有更好的方法来完成检查吗？

Answer 1

自jQuery 1.8开始，事件已移至$._data(element, 'events')，不再存储在各个元素上。

要传递新的this，您需要使用function.call(thisArg, arg1, arg2, ...)

$('#container').on('click', '.editThis', function(e) {
  console.log('Original handler');
  console.log('event type:', e.type);
  console.log('button id:', this.id);
});

// store reference to original event handler before using `off()`
var clickEvt = $._data($("#container")[0], "events").click[0],
  selector = clickEvt.selector,
  originalHandler = clickEvt.handler;

var clickCount = 0;

$('#container')
  .off('click', selector, originalHandler)
  .on('click', selector, newHandler);

function newHandler(e) {
  if (clickCount) {
    // call original handler with current `this` and event object
    originalHandler.call(this, e);
  } else {
    console.log('First click')
    clickCount++;
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <button class="editThis" id="btn">
    Click me twice
  </button>
</div>

将“this”传递给缓存的单击处理程序

1 个答案: