Question

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

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

的index.html
content.html
的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 基本上只显示一个＆＃34;按钮＆＃34;现在（实际上它显示的更多，但是对于这个例子，它只显示一个＆＃34;按钮＆＃34;）

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

我的 script.js 基本上只有＆＃34;更改＆＃34; 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();
    });
});

此处显示的所有内容都非常好（我不确定这是否应该如何使用导航，但它有效）。当我通过点击导航中的＆＃34;内容项目＆＃34; 来更改内容时， content.html 文件会显示在 div中 - 元素即可。但是，当我从content.html（之前加载过）点击按钮时，无警报会被触发。我猜因为＆＃34; javascript文件＆＃34;，在第一次加载网页时无法获得尊重。当我将javscript代码直接输入到content.html文件中时，该按钮实际上会触发一个警报（当我只链接文件<script src="js/script.js"></script>时也会发生这种情况）。

我真的不想在每个＆＃34;内容文件＆＃34;中输入这一行代码（<script src="js/script.js"></script>）。那么如何做到这一点更容易？也许我还需要改变我使用导航的方式。

感谢您的帮助

Answer 1

你想要event delegate。

这意味着您将#testButton的{{1}}事件委托给它的父级，即使该按钮尚未存在于dom中，但是当它存在时，它就是父级，在您的情况下，{ {1}}将能够处理按钮的事件监听器。

像：

click

内容被.load（）方法更改后的jQuery调用函数

1 个答案: