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

您的数据是异步到达的，而您正在创建＆＃34;悬停规则＆＃34; （同时附加事件处理程序）。

这意味着当你写：

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

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

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

注意：其他答案提出了使用jQuery＆＃39; .on()通过现有容器委派事件处理程序的好处，这可能被证明是一种更清晰，更具声明性的解决方案。< / em>的

Answer 2

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

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

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

Answer 3

由于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')

Div没有响应jQuery函数

3 个答案: