-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
  1. セレクターにスペースを入れます ( .div1 .div2)。現在、とクラスの両方 を持つ要素を選択しています。div1div2
  2. コードをラップして$(function() { ... });、DOM の準備ができたときに起動します。
  3. div3div1と の両方をカバーするスタイルになっていますdiv2。div1 z-index: 1それを上に座らせるために与えdiv3ます。

これが実際の例です

于 2013-06-25T17:26:38.623 に答える
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 に答える
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 に答える