当元素完全加载时调用 JavaScript 函数

Question

我在 ModalWindow（来自 wicket 扩展）上有以下代码（在 html 文件中）：

<wicket:head>
<script src="static/js/scroll.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () { 
          ffscroll('.scroller2');
    });
</script>
</wicket:head>

<wicket:panel>
<div wicket:id="scroller2" id="scroller2" style="overflow-x: hidden; overflow-y: auto; height: 240px" class="scroller2 YYYY ZZZZ">
  .... 
</div>
</wicket:panel>

和scroll.js

function ffscroll(id) {
        $(id).scroll(function () { 
            alert(id);
        });
    };

如果我使用简单的页面，则此代码工作正常：每次滚动时我都会收到警报。

但是在 ModalWindow 中我看到 JavaScript 代码是在模态窗口显示之前执行的，所以我想我需要在模态窗口显示之后调用 ffscroll('.scroller2'); ，但我不这样做不知道该怎么做。

奇怪的是，在 firebug 中我的脚本显示如下：

function () {
  ffscroll(".scroller2");
  alert("aaadssd");
}

“而不是 '.

Answer 1

最好的做法是将 JS 放入资源文件中，然后将其添加到您正在使用的任何组件中：

对于全局定义文件：

add(JavascriptPackageResource.getHeaderContribution("js/general.js"));

对于相对包：

add(new JavascriptResourceReference(MyPage.class, "MyPage.js"));

由于 ModalWindow 是使用 ajax 加载的，因此其所需的 JavaScript 源文件将被下载并在 ajax 回调上运行。

或者，如果您查看 ModalWindow.show(final AjaxRequestTarget target)，它会使用 target.appendJavascript() 将 JavaScript 添加到 AjaxRequestTarget，您可以覆盖show 方法添加额外的 JavaScript：

...
@Override
public void show(final AjaxRequestTarget target) {
    super.show(target);
    target.appendJavascript("ffscroll('.scroller2');");
}

然后，当在客户端浏览器上调用 Ajax 回调时，该 JavaScript 将运行。

希望有帮助