javascript - Div not responding to jQuery function -
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()
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
Post a Comment