Событие наведения на элемент div - PullRequest
Новая
       5

Событие наведения на элемент div

0 голосов
/ 15 октября 2018

Я создаю элемент div на лету.Непрозрачность составляет 0,5.При наведении курсора я хочу изменить прозрачность с помощью jquery, но программа не отвечает.

<div id="main"></div>

$(document).ready(function () {
try {
    $.get(url, function (result) {
        $.each(result.data, function (i, rowElement) {
            $('#main').append(`<div class="divHover">
            <label class="playlist-name">${this.name}</label>
            <div class="playlistCon">
            <div class="playlist-all-btn">
                <button class="deletePL-btn"><img class="deletePL-img" src="IMG/delete.png"></button>
                <button class="editPL-btn"><img class="editPL-img" src="IMG/edit.png"></button>
                <button class="playPL-btn" id='${this.id}'><img class="playPL-img" src="IMG/play.png"></button>
            </div>
        </div>        
          </div>`);
        });
    });

} catch (err) {
    alert(err.toString());
}});




        $(".playlistCon").hover(function () {
            $(this).parent().find('.playlistCon').css("opacity", "1");
            $(this).parent().find('.playlist-all-btn').css("display", "block");
        },
            function () {
                $(this).parent().find('.playlistCon').css("opacity", "0.5");
                $(this).parent().find('.playlist-all-btn').css("display", "none");
            });

Кстати, когда я добавил элемент div в html-файл, он работал. 

<div id="main">
            <div class="divHover">
                    <label class="playlist-name">AAAAA</label>
                    <div class="playlistCon">
                        <div class="playlist-all-btn">
                            <button class="deletePL-btn"><img class="deletePL-img" src="IMG/delete.png"></button>
                            <button class="editPL-btn"><img class="editPL-img" src="IMG/edit.png"></button>
                            <button class="playPL-btn"><img class="playPL-img" src="IMG/play.png"></button>
                        </div>
                    </div>
                </div>
            </div>

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Возможно, это связано с тем, что при регистрации прослушивателя для события hover элемент с классом playlistCon отсутствует.Я постараюсь переместить этого слушателя после того, как вы получите данные.Кроме того, вы должны переместить слушателя в класс divHover , так как наведение на elmenent, у которого скрыты все их дочерние элементы, не будет запущено.Попробуйте следующие модификации: 

$(document).ready(function ()
{
    try
    {
        $.get(url, function (result)
        {
            // Append elements to main div.

            $.each(result.data, function (i, rowElement)
            {
                $('#main').append(
                `<div class="divHover">
                    <label class="playlist-name">${this.name}</label>
                    <div class="playlistCon">
                    <div class="playlist-all-btn">
                        <button class="deletePL-btn"><img class="deletePL-img" src="IMG/delete.png"></button>
                        <button class="editPL-btn"><img class="editPL-img" src="IMG/edit.png"></button>
                        <button class="playPL-btn" id='${this.id}'><img class="playPL-img" src="IMG/play.png"></button>
                    </div>
                    </div>        
                </div>`
                );
            });

            // Register listeners for elements with class "playlistCon".

            $(".divHover").hover(function ()
            {
                $(this).css("opacity", "1");
                $(this).find('.playlist-all-btn').css("display", "block");
            },
            function ()
            {
                $(this).css("opacity", "0.5");
                $(this).find('.playlist-all-btn').css("display", "none");
            });
        });
     }
     catch (err)
     {
        alert(err.toString());
     }
});
0 голосов
/ 15 октября 2018

Ваш вызов $ .get требует времени, чтобы получить данные и отобразить новый HTML.Но ваш другой javascript все еще работает.Таким образом, когда вы пытаетесь присоединить прослушиватели событий, есть нули Div, к которым нужно присоединиться.

Это не относится к будущим div.Все будущие элементы должны иметь добавленных слушателей после того, как они находятся на странице.Ниже вы можете увидеть, как мы ожидаем их добавления на страницу, , затем мы добавляем к ним слушателей.

$(document).ready(function() {
    try {
        $.get(url, function(result) {
            $.each(result.data, function(i, rowElement) {
                $('#main').append(`
                <div class="divHover">
                    <label class="playlist-name">${this.name}</label>
                    <div class="playlistCon">
                        <div class="playlist-all-btn">
                            <button class="deletePL-btn"><img class="deletePL-img" src="IMG/delete.png"></button>
                            <button class="editPL-btn"><img class="editPL-img" src="IMG/edit.png"></button>
                            <button class="playPL-btn" id='${this.id}'><img class="playPL-img" src="IMG/play.png"></button>
                        </div>
                    </div>        
              </div>
                `);
            });
            // .each is done, all html is rendered
            var number_divs =  $(".playlistCon").length; 
            console.log(`But now... there are ${number_divs} divs to listen for hover on!`);

            // NOW I can attach listeners to them
            $(".playlistCon").hover(function() {
                $(this).parent().find('.playlistCon').css("opacity", "1");
                $(this).parent().find('.playlist-all-btn').css("display", "block");
            },
            function() {
                $(this).parent().find('.playlistCon').css("opacity", "0.5");
                $(this).parent().find('.playlist-all-btn').css("display", "none");
            });
        });

    } catch (err) {
        alert(err.toString());
    }
});


var number_divs =  $(".playlistCon").length; 
console.log(`Right now there are ${number_divs} divs to listen for hover on.`);

В качестве альтернативы, вы можете подключить одного слушателя к родительскому div и использовать event delegation для выполнения действий.Это будет относиться к будущему HTML! Читайте о делегировании событий здесь.

...