如何确保内联 jQuery 脚本在 HTML 页面中最后执行？

Question

我在尝试动态设置我的某些 html 样式时遇到问题。设置如下：

<h1>Title</h1>
<div class="gridster">

  <ul>
    [...]
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="someid" class="scrollable" data-view="List" data-unordered="true" data-title="someTitle"></div>
    </li>
  </ul>
</div>

<script>
$(window).load(function() {
  $(".scrollable").css("overflow", "hidden");
  $(".scrollable").children(".content").css("height", "100%");
  $(".scrollable").children(".content").css("overflow-y", "scroll");
  $(".scrollable").children(".content").css("margin-right", "-50px");
  $(".scrollable").children(".content").css("padding-right", "50px");
});
</script>

我正在使用 Dashing/Smashing with Dashing Icinga 创建仪表板。在 <div> 块中还有其他几个 <div> 块在运行时由后端脚本创建，生成实际的小部件内容。

正如您从最后的脚本片段中看到的那样，我正在尝试同时调整已经存在的 div 以及它的一个子代 div的 CSS 在运行时，我只需要确保此代码得到执行 AFTER 我原来的 div 的子代码已经加载。我怎样才能做到这一点？

此致丹尼尔

Answer 1

直接用CSS即可。您不需要处理 javascript.

<style>
.scrollable {
    overflow: hidden;
}
.scrollable .content {
    height: 100%;
    margin-right: -50px;
    padding-right: 50px;
    overflow-y: scroll;
}
</style>

如何确保内联 jQuery 脚本在 HTML 页面中最后执行？

How to make sure an inline jQuery script gets executed last of everything within a HTML page?

html

javascript

css

jquery

inline