JQuery эффект парения не работает

Question

У меня есть динамически сгенерированные теги 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");
    }
});

Есть идеи, что я делаю не так?

Answer 1

Если элементы добавляются динамически, используйте подход делегированных событий:

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

Здесь вместо body Вы можете использовать любой статический родительский элемент .widget_content,

Answer 2

Рабочая демонстрация http://jsfiddle.net/Ex3M6/

Попробуй в $(document).ready(function() {

Покойся с надеждой, что это соответствует твоему делу :)

Код

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

});​

Answer 3

Добавьте текст в ваши теги 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>

Answer 4

Использовать этот:

$(".widget_content").hover(
function () {
alert("enter");
},
function () {
alert("leave");
}
);