Question

我使用jQuery使div出现并消失。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $('.button').on('click', function(){
                $('.text').toggleClass('hidden');
            });  
        </script>
    </head>
    <style>
        .hidden{
            display: none;
        }
    </style>
    <body>
        <div class="button">show/hide test</div>
        <div class="text hidden">test</div>
    </body>
</html>

但是，当我点击div“按钮”时，没有任何反应，文本仍然隐藏。

Answer 1

你需要在文档就绪检查中包围你的jquery

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function() {
                $('.button').on('click', function(){
                    $('.text').toggleClass('hidden');
                });  
            });    
        </script>
    </head>
    <style>
        .hidden{
            display: none;
        }
    </style>
    <body>
        <div class="button">show/hide test</div>
        <div class="text hidden">test</div>
    </body>
</html>

或者你可以简单地将你的jquery代码移动到body标签的末尾，这样它引用的所有元素都已经存在，这里是代码

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
    </head>
    <style>
        .hidden{
            display: none;
        }
    </style>
    <body>
        <div class="button">show/hide test</div>
        <div class="text hidden">test</div>
        <script type="text/javascript">
            $('.button').on('click', function(){
                $('.text').toggleClass('hidden');
            });    
        </script>
    </body>
</html>

或者，您可以使用附加到始终存在的祖先元素的委托事件处理程序，如body或document。 重要说明：建议优先使用document body，因为body有一个与样式有关的错误，这意味着它可能无法接收鼠标事件。

<script type="text/javascript">
    $(document).on('click', '.button', function(){
        $('.text').toggleClass('hidden');
    });    
</script>

这可以通过监听事件冒泡到祖先元素（例如document），然后将jQuery选择器（即'.button'）应用于bubble chain，然后将事件处理函数应用于导致事件的匹配元素。最终结果是选择器只需要在事件时间匹配，而不是在事件注册时匹配。 document始终存在，因此是连接代码的好地方。

Answer 2

短版

变化：

$('.button').on('click', function() {

为：

$('body').on('click', '.button', function() {

长版

您没有正确使用on()事件处理程序。您使用它的方式要求.button元素在代码运行时存在，但事实并非如此。

事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on（）时存在。要确保元素存在且可以选择，请将脚本放在HTML标记中的元素之后，或者在文档就绪处理程序中执行事件绑定。或者，使用委派事件来附加事件处理程序。

正确的语法类似于$('body').on('click', '.button', function() {。在这里看到：

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
  $('body').on('click', '.button', function() {
    $('.text').toggleClass('hidden');
  });
</script>
<div class="button">show/hide test</div>
<div class="text hidden">test</div>

ToggleClass没有wokiing

2 个答案:

短版

长版