0

次のような div タグを動的に生成しました。

<div class="widget widget_1">
    <div class="widget_header widget_header_1"></div>
    <div class="widget_sub_header widget_sub_header_1"></div>
    <div class="widget_content widget_content_1"></div>
    <div class="widget_footer widget_footer_1"></div>
<div>

<div class="widget widget_1">
    <div class="widget_header widget_header_1"></div>
    <div class="widget_sub_header widget_sub_header_1"></div>
    <div class="widget_content widget_content_1"></div>
    <div class="widget_footer widget_footer_1"></div>
<div>

<div class="widget widget_6">
    <div class="widget_header widget_header_6"></div>
    <div class="widget_sub_header widget_sub_header_6"></div>
    <div class="widget_content widget_content_6"></div>
    <div class="widget_footer widget_footer_6"></div>
<div>

これらの div タブはユーザーの選択に基づいて生成されるため、一度に画面にいくつ表示されるかはわかりません。画面に同じウィジェットを多数表示したり、一度に違いを表示したりできることだけはわかります。画面を一気に。

これらのウィジェットにカーソルを合わせると、ホバー効果が得られます。フォローしてみましたが、ホバリングしても何も起こりません.widget。

$(".widget_content").on({
    mouseenter: function () {
        alert("enter");
    },
    mouseleave: function () {
        alert("leave");
    }
});

私が間違っていることは何か分かりますか？

4

4 に答える 4

3

要素が動的に追加される場合は、委任されたイベント アプローチを使用します。

$("body").on({
    mouseenter: function() {
        alert("enter");
    },
    mouseleave: function() {
        alert("leave");
    }
}, ".widget_content");

ここでは、代わりに のbody任意の静的親要素を使用できます.widget_content。

于 2012-11-07T09:22:26.710 に答える
1

実際のデモ http://jsfiddle.net/Ex3M6/

試してみる$(document).ready(function() {

それがあなたの原因に合っていることを願っています:)

コード

$(document).ready(function() {
    $(".widget_content").on({
        mouseenter: function() {
            alert("enter");
        },
        mouseleave: function() {
            alert("leave");
        }
    });

});​
于 2012-11-07T09:24:20.463 に答える
0

これを使って：

$(".widget_content").hover(
function () {
alert("enter");
},
function () {
alert("leave");
}
);
于 2012-11-07T09:24:49.577 に答える
0

それ以外の場合は、div タグにテキストを追加します。それ以外の場合は、マウスをホバリングしているものの上に追加します。コンテナdivタグには、閉じるタグも正しく含める必要があります (つまり</div>)。

<div class="widget widget_1">
    <div class="widget_header widget_header_1">dfsdfsdf</div>
    <div class="widget_sub_header widget_sub_header_1">sdfsdf</div>
    <div class="widget_content widget_content_1">sdfsdf</div>
    <div class="widget_footer widget_footer_1">sdfsdfsdf</div>
</div>

<div class="widget widget_1">
    <div class="widget_header widget_header_1">sdfsdf</div>
    <div class="widget_sub_header widget_sub_header_1">ggggg</div>
    <div class="widget_content widget_content_1">aaaaa</div>
    <div class="widget_footer widget_footer_1">ssss</div>
</div>

<div class="widget widget_6">
    <div class="widget_header widget_header_6">sssss</div>
    <div class="widget_sub_header widget_sub_header_6">fgggg</div>
    <div class="widget_content widget_content_6">fdff</div>
    <div class="widget_footer widget_footer_6">dfgdfgdfg</div>
</div>

あなたのjqueryコードは、この変更後に機能します。

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">

    $(document).ready(function() {
        $("div[class^='widget_content']").on({
        mouseenter: function () {
            alert("enter");
        },
        mouseleave: function () {
            alert("leave");
        }
        });

});                

</script>
于 2012-11-07T09:33:37.910 に答える