2016-10-12 93 views
0

我想确定是否已加载Twitter Bootstrap“tab.js”。一种方法是查看它所钩住的事件。jQuery._data事件处理程序

如果我倾倒事件处理程序到控制台:

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 console output

正如你可以看到点击阵列[7]成为一个数组[5]但显示了7个对象,然后当我尝试显示元素[5]的名称空间时,元素[5]和[6]消失了!

任何人都知道这里发生了什么,以及如何阅读元素[5]的价值,是

namespace:"bs.data-api.tab" 

感谢 JC

+0

'如果(typeof运算$ .fn.tabs === “功能”){/ * tab.js可* /}' – Andreas

+0

可悲的是,引导tab.js增加了“标签“而不是”标签“和 $ .fn.tab 始终未定义。测试它并不确定是否加载了“tab.js”。 – jcsubmit

回答

0

这是一个时间问题。我装“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));