这很尴尬。我在 stackoverflow 上浏览了几篇类似的帖子,类似于 Reference Error: Function xxx is not defined。没运气。当然,我确实也用谷歌搜索过这个,但我只是想出了死胡同。
长话短说:我继承了一个很长的 PHP 页面。到处都是缩小和连接的脚本和样式表。通过backbone.js 注入的业务逻辑。写所有这些东西的人对我来说是禁区。我知道,这很糟糕,但我无法改变这种情况的政治。
这是交易:我需要将 twitter 引导工具提示添加到动态插入的页面叠加层上的一堆图标按钮中。这个页面覆盖来来去去,并不总是 DOM 的一部分。因此,twitter 引导工具提示启动不会影响该页面覆盖 - 仅仅是因为它在有人单击按钮之前不存在。
我能够向调用页面覆盖的那个按钮添加一个“onclick”,调用一个函数,该函数a)检查页面覆盖的存在和b)在页面覆盖上启动工具提示。该函数称为 ittps()。这是,在那个 PHP 页面的最底部:
<!-- START MANAGEMENT PAGES -->
<script type="text/javascript">
// INSTANTIATE TOOLTIPS ON MANAGEMENT PAGES
// THIS FUNCTION GETS CALLED FROM: instances-grid-parent
function ittps(w){
if(w=='backup'){
if( $(".management").length ){
if( $("[data-toggle='tooltip']").length ){
$(".mngmnt-icon-restore, [data-toggle='tooltip']").tooltip();
console.log('And.......................we are good.');
}else{
setTimeout("ittps();", 500);
}
}else{
console.log('Nothing to do here.......................');
setTimeout("ittps();", 500);
}
}
</script>
</body>
</html>
可能是我太天真了,以为最底部的script标签里面的函数就可以用于文档的其余部分了?
基本上,当按钮被点击时,我得到一个错误:
ReferenceError: ittps(w) is not defined.
因此,在尝试添加window.ittps = function(w){
代码并做了很多其他事情之后(例如尝试将函数添加到$(document).ready(function(){
队列中,没有任何效果。我准备再过一个小时把这个东西扔到这里的硬隔间墙上。
有没有人对如何使这项工作有任何想法?如果我等待页面覆盖显示然后在 JavaScript 控制台 (Firebug) 中运行该函数,我可以让它工作。
PS:我无法将任何 JavaScript 添加到页面叠加层的内容中,因为这些内容是由主干.js 呈现的。我不知道是否有解决方法。在这一点上,我会接受任何建议并接受它。谢谢。
最后说明:如果我在 JavaScript 控制台 (Firebug) 中执行代码,代码本身可以完美运行。一旦我运行它,提示符就会根据需要显示:
var w = 'backup';
if(w=='backup'){
if( $(".management").length ){
if( $("[data-toggle='tooltip']").length ){
$(".mngmnt-icon-restore, [data-toggle='tooltip']").tooltip();
console.log('And.......................we are good.');
}else{
setTimeout("ittps('backup');", 500);
}
}else{
console.log('Nothing to do here.......................');
setTimeout("ittps('backup');", 500);
}
}
即使在 JavaScript 控制台中执行此代码有效,当页面覆盖存在时,此处请求的是带有工具提示代码的 HTML。
<div class="slct-with-icns">
<span class="mngmnt-icons mngmnt-icon-restore" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Restore" data-original-title="Restore">.</span>
<span class="mngmnt-icons mngmnt-icon-download" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Download" data-original-title="Download">.</span>
<span class="mngmnt-icons mngmnt-icon-schedule" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Schedule a Backup" data-original-title="Schedule a Backup">.</span>
<span class="mngmnt-icons mngmnt-icon-test" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Test the selected restore action" data-original-title="Test the selected restore action">.</span>
<span class="mngmnt-icons mngmnt-icon-delete" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Delete the selected backup" data-original-title="Delete the selected backup">.</span>
</div>