I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again.
HTML
<div class="inputWrap hidden">
<input class="inputNumber" type="text" value="5">
<div class="slider"></div>
</div>
<div class="boxout">
<div class="box"></div>
</div>
<div class="add">
add box
</div>
CSS
.boxout {
width: 200px;
height: 200px;
}
.box {
width: 10%;
height: 10%;
background: black;
}
JQUERY
$(".slider").slider({
min: 0,
max: 10,
slide: function(event, ui) {
console.log("slide", ui);
$(".box").css("width", 10 + ui.value * 2 + "%");
$(this)
.parent()
.find(".inputNumber")
.val(ui.value);
},
create: function(event, ui) {
$(this).slider(
"value",
$(this)
.parent()
.find(".inputNumber")
.val()
);
}
});
var slider = $(".slider");
slider
.slider("option", "slide")
.call(slider, null, { value: slider.slider("value") });
$(".add").click(function() {
$(".boxout").append('<div class="box"></div>');
});
FIDDLE
This setup works perfectly, but when adding a new div, it doesn't receive the same styling as the original box until the slider is interacted with again.
http://jsfiddle.net/or5fhsvh/1/
Your assistance is greatly appreciated.