Div 未响应 jQuery 函数

Question

我有一堆产品会在用户第一次加载页面时加载（追加）到页面中。我使用 $.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()

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

  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

由于product_tags是动态生成的元素，您需要使用.on API来委托这些元素的事件。 .on API

使用这个

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

Answer 2

您的数据异步到达，而您同步创建 "hover rule"（附加事件处理程序）。

这意味着当你写：

var product_tags = $('.product_tags');
product_tags.mouseenter(function() {//...

product_tags 是在发送异步 POST 调用后 立即存在的元素集合。（这些 POST 的答案此时尚未到达，因此您要附加的 DOM 也未生成。）

要解决此问题，请在异步应答到达后触发这些 mouseenter 事件处理程序的附加（来自您用于处理返回数据的同一回调），并且您已设置DOM 你需要一起工作。

注意：其他答案提出了关于使用 jQuery 的 .on() 通过现有容器委派事件处理程序的好处，这可能被证明是更清洁的，更具声明性的解决方案。

Answer 3

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

您可以使用委托事件，将其绑定到元素将结束的现有元素：

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

Div 未响应 jQuery 函数

Div not responding to jQuery function

javascript

jquery

callback