jQuery._data事件处理器

jQuery._data event handlers

本文关键字:事件处理 处理器 事件 data jQuery      更新时间:2023-09-26

我正在尝试确定Twitter Bootstrap "tab.js"是否已加载。一种方法是查看它所挂钩的事件。

如果将事件处理程序转储到控制台:

var ii;
var docEvents = jQuery._data(document, "events");
var docClickEvents = docEvents.click;
console.log("docEvents: %O", docEvents);
console.log("docClickEvents: %O", docClickEvents);
console.log("docClickEvents.length: %O", docClickEvents.length);
for (ii = 0; ii < 7; ii += 1) {
    console.log("docClickEvents[%d].namespace=%O", ii, docClickEvents[ii].namespace);
}

Chrome的控制台显示:

Chrome控制台输出

可以看到,点击Array[7]变成Array[5],但是显示了7个对象,然后当我试图显示元素[5]的名称空间时,元素[5]和[6]消失了!

有谁知道这里发生了什么,以及如何读取元素[5]的值,

namespace:"bs.data-api.tab"

谢谢JC

这是一个时间问题。我正在加载'tab.js',将其附加到主体,并假设此过程将立即完成:

ourScript = document.createElement("script");
ourScript.type  = "text/javascript";
ourScript.src = sourceDir + "tab.js";
document.body.appendChild(ourScript);

似乎没有从jquery追加回调,所以我添加了一秒钟的时间延迟检查'tab.js',一切似乎都很好。我想Chrome控制台会变得混乱,并显示奇怪的效果。

最终代码:

// ---------------------------------
var eventNameSpaceLoaded = function (thisNamespace) {
    var isLoaded = false;
    var theseClickEvents = jQuery._data(document, "events").click; 
    Object.keys(theseClickEvents).forEach(function (key) {
        if (theseClickEvents[key].namespace && (theseClickEvents[key].namespace === thisNamespace)) {
            isLoaded = true;
            return false;               // stop the each
        }
    });
    return isLoaded;
};
// check bootstrap tab.js is loaded
var ourScript;
if( !eventNameSpaceLoaded("bs.data-api.tab")) {
    ourScript = document.createElement("script");
    ourScript.type = "text/javascript";
    ourScript.src = sourceDir + "tab.js";
    document.body.appendChild(ourScript);
}
// has tab.js been loaded - try checking for 10 seconds
(function checkTabLoad( counter) {
    if( !eventNameSpaceLoaded("bs.data-api.tab")) {
        counter -= 1;
        if(counter > 0){
            setTimeout(function(){  
                checkTabLoad( counter); 
            }, 100);
        }
    } else {
        // get tabs working 
        $('#SOME_ SELECTOR').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        console.log("tabs fired up");
    }
}( 100));