Having an issue when trying to add a CSS class to a jQuery created element within a Polymer component.
The code for the Polymer component is as follows:
<dom-module id="image-add">
<style>
.image {
height: 100%;
}
</style>
<template>
<div id = "container">
</div>
</template>
<script>
Polymer({
is: "image-add",
properties: {
images_to_add: {
type: Array
}
},
ready:function(){
var shadowRoot = this.shadowRoot || this;
var container = $(shadowRoot).find('#container');
var new_image = $("<div></div>")
new_image.css({"background-image":"url('" + this.images_to_slide[1] + "')"})
new_image.addClass("image");
new_image.appendTo(container);
}
});
</script>
</dom-module>
I am passing an array of images into the Polymer component, which I use to set as the background image of a dynamically added div using jQuery. Although jQuery successfully adds the class "image" to the dynamically created div, the effects of the class are not visible. The div does not adjust its height to 100%. Even after inspecting the div, the class is present but no changes are seen.
Why isn't the class affecting the dynamically generated div? It seems like there might be an issue related to Polymer since this should normally work without any problems.
NOTE: It's crucial that I can dynamically generate these divs at any given time. Also, the background image style is already being applied correctly.