javascript - 在除法上调用 JavaScript 函数( Bootstrap 模式弹出窗口)

Question

我有一个 JavaScript 函数，希望在使用 Bootstrap 的模式弹出窗口时调用它。但是，该函数根本没有被调用。谁能帮我解决这个问题吗？

这是我的 JavaScript 代码:

<script type="text/javascript">
      /*---------------------------------------------About Us-----------------------------------------------*/
      function aboutUs(AU) {
          $("#modal-content").window({
                  icon: ('/SAFETY_AT_SG/Images/PopUpWindowImg/Analysis.png'),
                  title: "About Us",
                  content: "<div>" +
            "<h3>Our Vision and Mission</h3>" +
            "<img src='..Images/Logo.jpg' />" +
            "<h5>Our Vision</h5>" +
            "<p>Create safety awareness among Teenagers to Adults</p>" +
            "<h5>Our Mission</h5>" +
            "<p>- Develop an Online Map Portal/Mobile Platform which serve as a purpose for adults to <br/>identify the safety issue around a area.</p>" +
            "<p>- Provide kids/teenagers the safer/shortest route to travel back home avoiding any <br/>unncessary trouble." +
            "</div>",

              });
      }
</script>

这是我调用该函数的地方。

<div class="modal fade" id="About" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>About Us</h4>
            </div>
            <div class="modal-body">
                <script type="text/javascript">
                    aboutUs(this);
                </script>
            </div>
        </div>
    </div>
</div>

有人可以更正我的代码吗？

Answer 1

在文档“准备就绪”之前，无法安全地操作页面。 jQuery 会为您检测到这种准备状态。仅当页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时，$( document ).ready() 中包含的代码才会运行。

所以你的代码将更改为:

<div class="modal fade" id="About" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>About Us</h4>
            </div>
            <div class="modal-body">
                <script type="text/javascript">
                    $(document).ready(function () {
                        aboutUs(this);
                    });
                </script>
            </div>
        </div>
    </div>
</div>