javascript - 从不同文件将 html 加载到 div 后如何使用 javascript 编辑标签？

Question

在我的索引文件中，我尝试将 Bootstrap 模式从另一个 html 文件加载到 div 中。加载后，我正在使用 javascript 编辑该模式的标题。但是该文本在第一次加载时没有改变，但后来，文本更改工作正常。有没有办法从其他文件加载html，然后执行javascript。我正在使用其他 html 文件中的 ID 编辑文本。

这是我的 JavaScript

function changeTypeName(){

        if ($(this).attr('id') == 'adminAnchor'){
            alert('admin');
            document.getElementById('userType').innerHTML= "Login (Admin)";

        }
        else if ($(this).attr('id') == 'examinerAnchor'){
            document.getElementById('userType').innerHTML= "Login (Examiner)";
        }
    }

这是我尝试在单击 anchor 标记后加载 Bootstrap 模式的 HTML，然后在加载后编辑文本。

<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-log-in"></span> Login </a>
<ul class="dropdown-menu">
    <li><a id="adminAnchor" href="loginModal.html" data-toggle="modal" data-target="#indexModal">Admin</a></li>
    <li><a id="examinerAnchor" href="loginModal.html" data-toggle="modal" data-target="#indexModal">Examiner</a></li>
</ul>

<script type="text/javascript">
    $("a").click(changeTypeName);
    alert(changeTypeName);
</script>

我将模式从其他 HTML 文件加载到此 div 中。

<div id="indexModal" class="modal fade text-center" >
<div class="modal-dialog" >
    <div class="modal-content"></div>
</div>

这是来自不同类的 Bootstrap 模式。

<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 class="modal-title" id="userType">Login</h3>
</div>
<div class="modal-body " style="margin: auto">
    <!--some FORM here -->
</div>
<div class="modal-footer">
    <!--Some text and button here-->
</div>

这里第一次执行 Javascript 时，Html 文件和 ID 不存在于索引文件中，但后来工作正常，因为来自其他文件的 html 标签和模态 ID 存在于索引文件中。

有什么办法可以解决这个问题吗？

Answer 1

您需要等到 dom 完全加载，这就是为什么您应该将单击放入文档就绪函数中:

$(document).ready(function(){
    $("a").click(changeTypeName);
});

而不是

$("a").click(changeTypeName);

问候!