javascript - Div not responding to jQuery function -


  1. i have bunch of products loaded(append-ed) page when user loads page first time. use $.post() call database , append data number of divs container.

     $(function() {    var profile_looks = $('#profile_looks');    $.post("apples.php", function(json) {       var looks = $.parsejson(json);       profile_looks.prepend(       (some code here)       )    });  // close $.post() 
  2. after these products loaded, want products change background color on hover.

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

however step 2 not work, meaning when mouseover product_tags, not change. why aren't product_tags div responding function call?

full code below

$(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; < 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;   }; // 2nd for-loop finishes, , re-runs 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 = "";          }          }); // $.post(displayproducts.php)         }) // $.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() 

as product_tags dynamically generated elements, need use .on api delegate events such elements. .on api

use this

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

Comments

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -