javascript - Div 不响应 jQuery 函数

Question

1. 我有一堆产品会在用户第一次加载页面时加载(追加)到页面。我使用 $.post() 调用数据库，然后将数据作为多个 div 附加到容器中。

    $(function() {
   
     var profile_looks = $('#profile_looks');
   
     $.post("apples.php", function(json) {
   
        var looks = $.parseJSON(json);
   
        profile_looks.prepend(
   
        (some code here)
   
        )
   
     });  // close $.post()
   

2. 加载这些产品后，我希望产品在悬停时更改背景颜色。

     var product_tags = $('.product_tags');
   
     product_tags.mouseenter(function() {
   
        $(this).css('background-color', 'white');
   
     });
   
     }); // close $(function()
   

但是第 2 步不起作用，这意味着当我将鼠标悬停在 product_tags 上时，它们不会改变。为什么 product_tags div 不响应函数调用？

完整代码如下

$(function() {

       var profile_looks = $('#profile_looks');

        $.post("apples.php", function(json) {

               var looks = $.parseJSON(json);

                var page_post = "";

        $.post('oranges.php', function(products_data) {

        var products_display = $.parseJSON(products_data);


        for(i = 0; i < looks.length; i++) {

            var fruits = products_display[i];  

                        for(var key in fruits) {

                         var test = "<div class='product_tags' style='color:" + "black" + "' >" + "<span class='type' style='font-weight:600'>" + key + "</span>" + " " + "<span class='title'>" + fruits[key] + "</span>" + "</div>";

                          var mega = mega + test;


}; // the 2nd for-loop finishes, and re-runs the first for-loop

}; // b=0 timer loop finishes


 profile_looks.prepend(

            "<div class='look'>" + "<div class='look_picture_container'>" +

            "<img src='" + "user_pictures/" + username_cookie + "/" + looks[i][0] + "'>" +

            "<div class='heart'>" +

            "<img src='" + "../function icons/hearticon black.png" + "'>" +

            "<div class='heartcount'>" +


            "</div>" +
            "</div>" +


            "<div class='product_tags_container' style='background-color:" + looks[i][3] +  "' >" + mega + "</div>" +

            "</div>" + // class="look_picture_container"

            "<div class='post_description'>" +
            looks[i][1] +
            "</div>" + // class= "post_description"

            "</div>"); // class="look"

            var mega = "";

        }

        }); // for the $.post(displayproducts.php)
        }) // for the $.post(displaylooks.php)



 var product_tags = $('.product_tags');

    product_tags.mouseenter(function() {

            $(this).css('background-color', 'white');
    });

    product_tags.mouseleave(function() {

    $(this).css('background-color', 'transparent')
    });


}); // end of $(function()

Answer 1

它不起作用，因为当您尝试将事件绑定(bind)到它们时，这些元素尚不存在。

您可以使用委托(delegate)事件，将其绑定(bind)到元素将结束的现有元素:

profile_looks.on('mouseenter', '.product_tags', function() {
  $(this).css('background-color', 'white');
}).on('mouseleave', '.product_tags', function() {
  $(this).css('background-color', 'transparent')
});