Question

我希望div2可以点击。但它不起作用。我在这做错了什么？

（代码在阅读评论后已更新）注意：如果我将div3设置为可点击，它就可以了。改回div2不起作用。 div1也不起作用。

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>Test Code</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style type="text/css">

        .div1 {
            position: fixed; 
            width: 250px; 
            height: 80%; 
            border-style: solid; 
            overflow: hidden;
        }
        .div2 {
            position: fixed; 
            width: 240px; 
            height: 50px; 
            border-style: solid; 
            overflow: hidden;
        }

        .div3 {
            position: fixed; 
            width: 100%; 
            height: 80%; 
            border-style: solid;
        }
    </style>
</head>

<body>
    <div >
        <div >
            <div class="div1" >
                <div class="div2" id="item" >
                    This div should be clickable
                </div>
            </div>
            <div class="div3">
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $(".div2").click(function() {
                window.alert("sometext");
                $('.div3').html(function() {
                    var emph = '<em>' + $('p').length + ' paragraphs!</em>';
                    return '<p>All new content for ' + emph + '</p>';
                });
            });
        });
    </script>
</body>
</html>

Answer 1

在选择器中放置一个空格（.div1 .div2）。目前，您正在选择 div1和div2类的元素。

将代码包裹在$(function() { ... });中，以便在DOM准备就绪时将其激活。

div3的样式包含div1和div2。授予div1 z-index: 1以使其位于div3上方。

Here's a working example

Answer 2

通过将jQuery代码放在实际元素之前，jQuery代码还不知道.div2在DOM中。

尝试在$(document).ready()中包装jQuery代码或将其移到这些元素下面。另外，用逗号分隔点击功能中的元素。

$(document).ready(function(){
        $(".div1, .div2").click(function() {
            window.alert("sometext");
            $('.div3').html(function() {
                var emph = '<em>' + $('p').length + ' paragraphs!</em>';
                return '<p>All new content for ' + emph + '</p>';
            });
        });
});

Answer 3

您忘记将代码包装在

中

$(document).ready(function() {
    $(".div1 .div2").on('click', function() {
        $('.div3').html('<p>All new content for <em>' + $('p').length + ' paragraphs!</em></p>');
    });
});

Answer 4

执行脚本时，您的DOM未完成加载。这意味着当您为其分配单击事件处理程序时，不存在具有类“div2”的div。在$(document).ready( );

中包含您的代码

可点击的div无效

4 个答案: