Есть бегунок, мне нужно чтобы данные с него шли в свойство css div созданного и он закруглялся, с обычным дивом все работает, но как я пробую это сделать сознанному диву не работает, подскажите, пожалуйста,в чем проблема.
$(document).ready(function() {
var dname_id = 1;
$("#btn2").click(function() {
var dynDiv = $('<div>')
.attr('id', 'div_' + dname_id++)
.css({
'width': '50px',
'height': '20px'
})
.addClass('resize')
.html(dname_id - 1);
$('#container').append(dynDiv);
//-------------------------------------------------------//
dynDiv.resizable({
ghost: true
});
dynDiv.draggable({
containment: 'parent'
});
dynDiv.click(function() {
$('.selected').removeClass('selected');
$(this).addClass('selected');
var tekdi = $(".selected").attr("id");
var img1 = "#" + tekdi;
});
});
/*--------------------------------------------*/
var tekdi = $(".selected").attr("id");
var div = $("#" + tekdi);
startVal = 5;
$("#slider-range").slider({
range: "min",
min: 0,
max: 140,
value: startVal,
create: function(event, ui) {
div.css('border-radius', startVal);
},
slide: function(event, ui) {
// console.log(ui.value)
var v = ui.value;
div.css('border-radius', v);
$("#amount").val(v);
$("#s").html(v);
}
});
});
.resize {
background-color: #29e;
color: white;
font-size: 20px;
font-family: sans-serif;
position: fixed;
border: 2px solid;
padding: 1px 1px;
width: 100px;
height: 100px;
}
#container {
box-shadow: 4px 0px 18px -1px #0000ff;
width: 700px;
height: 500px;
}
.selected {
border: 1px dotted black;
/*box-shadow:0px 0px 10px rgba(0,0,0,0.5);*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<button id="btn2">new div</button>
<br/>
<div id="container"></div>
<div id="c"></div>
<div id="slider-range"></div>
<p>
<label for="amount">Максимальная цена:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
</br>