Question

我有这个主页

的index.html

<script>
$(document).ready(function(){
    $("#content").load('page.html');

    $("#menu").click(function () {
       alert('Hello');
    });
});
<script>

<div id="content"></div>

并在page.html中

<div id="menu">
    <ul>
        <li><a href="#">Link</a></li>
    </ul>
</div>

.load正在运行.. 但警报功能不起作用

我必须但是page.html中的函数??? 或者有另一种方式??

Answer 1

问题是在加载子页面之前绑定到#menu的代码。您需要使用on或在加载完成后运行的回调中执行绑定

$(document).ready(function(){
    $("#content").load('page.html', function() {
      $("#menu").click(function () {
         alert('Hello');
      });
    });
});

带有on

的版本

$(document).ready(function(){
    $('#content').load('page.html');

    $('#content').on('click', '#menu', function() {
       alert('Hello');
    });
});

Answer 2

由于内容是动态加载的，因此您需要使用live()（对于jQuery＆lt; 1.7）或on()（1.7 +）。

这些函数将事件委托给动态元素以及页面加载时存在的元素。

以下是on()的外观：

$(document).on("click", "#menu", function(){
    alert("Menu clicked.")
});

Answer 3

由于正在加载具有id菜单的元素，因此您需要使用on

<script>
$(document).ready(function(){
    $("#content").load('page.html');

    $(document).on('click', '#menu', function () {
       alert('Hello');
    });
});
<script>

<div id="content"></div>

基本的jquery .load

3 个答案: