-1

我希望 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>
4

4 回答 4

3

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

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

$(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>';
            });
        });
});
于 2013-06-25T17:27:13.597 回答
3
  1. .div1 .div2在选择器 ( )中放置一个空格。当前，您正在选择同时具有和 div1类div2的元素。
  2. 当 DOM 准备好时，将您的代码包装起来$(function() { ... });以触发它。
  3. div3被设计为同时覆盖div1和div2。让它div1 z-index: 1坐在上面div3。

这是一个工作示例

于 2013-06-25T17:26:38.623 回答
1

您忘记将代码包装在

$(document).ready(function() {
    $(".div1 .div2").on('click', function() {
        $('.div3').html('<p>All new content for <em>' + $('p').length + ' paragraphs!</em></p>');
    });
});
于 2013-06-25T17:26:47.623 回答
0

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

于 2013-06-25T17:27:25.893 回答