3

だから私はこの単純なHTMLを持っています

<div class="song">
    <img src="http://o.scdn.co/300/40e3ec60c92513f724f47ce71baad1e496627107">
</div>

そして、この単純なjQuery

$(".song").on( "mouseenter", function() {
    $(this).css( "background-color", "red" );
    alert('bla');
});

そして、イベントは発生しません。

それでも

$(".naujienuKategorija").on( "mouseenter", function() {
    $(this).css( "background-color", "red" );
});

で問題なく動作します

<p class="naujienuKategorija">Apklausa</p>

これは同じページにあります。

.songには次のCSSがあります

.song {
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid #E0E0E0;
    overflow: hidden;
}

私は明らかに何かが欠けています...明らかです。

4

1 に答える 1

2

イベントが要素にバインドされるためには、要素が準備され、検出されている必要があります。$(document).readyこれを行う一般的な方法は、ページ上の元の要素にアクセスできるようにするため、イベント バインディングを の中に配置することです。だからこれを使う：

$(document).ready(function () {
    $(".song").on( "mouseenter", function() {
        $(this).css( "background-color", "red" );
        alert('bla');
    });
});

別のオプションは、ターゲット要素の直後または直前のいずれかの時点で、ページにイベント バインディングを配置すること</body>です。例えば：

<div class="song"></div>
<div class="song></div>

<script type="text/javascript">
    $(".song").on("mouseenter", function () {

    });
</script>

.naujienuKategorija上記の 2 番目の方法を使用していたため、要素を操作していた可能性がありますが、要素を操作していませんでした.song。

于 2013-04-29T19:31:21.083 に答える