Question

我即时创建了一些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");
            });

顺便说一句，当我在html文件中添加div元素时，它起作用了。

<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>

Answer 1

您就是$ .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！ Read about Event Delegation here.

Answer 2

也许是因为当您为 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());
     }
});

div元素上的悬停事件

2 个答案: