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

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>