在内容被.load(）方法更改后，jQuery调用函数

jQuery call function after content get changed by .load() method

本文关键字：jQuery 函数 调用 方法 load      更新时间：2023-09-26

我有一个关于jQuery的非常基本的问题，但我真的不知道如何把它放在一个短句/标题词中搜索。所以，首先，如果这可能是一个双重帖子，我很抱歉。

对于我的问题，我想只有这三个文件是相关的：

  1. index.html
  2. content.html
  3. script.js

我的index.html基本上只是一个保存导航栏的文件（使用Bootstrap v3.3.0构建）

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <!-- Bootstrap CSS -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles CSS -->
        <link href="css/styles.css" rel="stylesheet">
    </head>
    <body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    ...
                </div>
                <div class="navbar-collapse collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="home">Home</a></li>
                        <li><a href="content">Content</a></li>
                        ...
                    </ul>
                </div><!-- end navbar-collapse -->
            </div><!--end container -->
        </nav> <!-- end navbar -->

        <div class="container" id="mainContainer">
            <!-- Load by default from the Navigation with jQuery -->
        </div><!-- end container -->
        <footer>
            ....
        </footer>
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <!-- Custom JS -->
        <script src="js/script.js"></script>
    </body>
</html>

我的content.html现在基本上只显示一个"按钮"（实际上它显示的要多得多，但在本例中它只显示一"按钮"）

<div class="col-xs-12 col-md-6">
    <a id="testButton" class="btn btn-success" href="#">This is a Test-Button</a>
</div>

js基本上只"更改"div元素（<div class="container" id="mainContainer">…</div>）的内容。

$(document).ready(function () {
    $('.nav li a').click(function(e) {
    $('.nav li').removeClass('active');
        var $parent = $(this).parent();
        var $content = $(this).attr('href');
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
            $('#mainContainer').hide().load($content + '.html').fadeIn('500');
            $('#mainFooter').hide().fadeIn('500');
        }
        e.preventDefault();
    });
    $('#testButton').click(function(event){
        alert("Test, this Button works!");
        event.preventDefault();
    });
});

这里显示的一切都很好（我不确定这是否是你应该使用导航的方式，但它是有效的）。当我通过单击导航中的"content Item"来更改内容时，content.html文件将显示在div元素中。但是，当我从content.html（以前加载过）中单击按钮时，不会触发任何警报。我想是因为"javascript文件"，当网页第一次加载时，找不到尊重。当我将javscript代码直接输入到content.html文件中时，按钮实际上会触发一个警报（当我只链接文件<script src="js/script.js"></script>时也是如此）。

我真的不想在每个"内容文件"中输入这一行代码（<script src="js/script.js"></script>）。那么，有没有一种更简单的方法可以做到这一点呢？也许我还需要改变我使用导航的方式。

感谢您的帮助

您需要事件委托。

这意味着您将#testButton的click事件委托给它的父级，即使该按钮还不存在于dom中，但当它存在时，它就是父级，在您的情况下，#mainContainer将能够处理按钮的事件侦听器。

类似：

$('#mainContainer').on('click', '#testButton', function(event){
    alert("Test, this Button works!");
    event.preventDefault();
});
相关文章：