將“ 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>