I would like to apply the jQuery resizable widget to a series of div
tags that could potentially be create
You need to reinitialize col.resizable();
once new element added.
Please check below working code:
$(function() {
var cols = $(".col");
cols.resizable({
maxHeight: 20,
minHeight: 20,
distance: 5,
handles: 'e',
start: function() {
console.log("I've started!");
},
stop: function() {
console.log("I've stopped!");
}
});
$("#addNew").on("click", function() {
cols.filter(":last").after('<div class="col new">' + parseInt(cols.length + 1) + '</div>');
cols = $(".col");
cols.resizable({maxHeight: 20,
minHeight: 20,
distance: 5,
handles: 'e'});
});
});
.col {
float: left;
width: 20px;
height: 20px;
background: #f00;
margin-right: 1px;
}
.col.new {
background: #0f0;
}
button {
clear: left;
display: block;
margin-top: 10px;
}
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="cols">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<button id="addNew">Add</button>
I know this is a old post, But still I felt I could post a better answer for future reference, Since in your comments you had mentioned about code reuse and not applying the plugin to elements multiple times this solution should overcome those issues.
$(function() {
ApplyResizablePluginToCol($(".col")); // cal the function by passing all the elements to which the plugin must be applied to
$("#addNew").on("click", function() {
$(".col:last").after('<div class="col new">' + parseInt( $(".col").length + 1) + '</div>');
ApplyResizablePluginToCol($(".col:last"));// take the last element, ie the element that is created just now
});
function ApplyResizablePluginToCol(elements){ //reusable function
elements.resizable({
maxHeight: 20,
minHeight: 20,
distance: 5,
handles: 'e',
start: function() {
console.log("I've started!");
},
stop: function() {
console.log("I've stopped!");
}
});
}
});
.col {
float: left;
width: 20px;
height: 20px;
background: #f00;
margin-right: 1px;
}
.col.new {
background: #0f0;
}
button {
clear: left;
display: block;
margin-top: 10px;
}
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="cols">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<button id="addNew">Add</button>
Try this code it's working for me
$("#cols").on('mouseenter',cols,function(){
cols.resizable({
maxHeight: 20,
minHeight: 20,
distance: 5,
handles: 'e',
start: function() {
console.log("I've started!");
},
stop: function() {
console.log("I've stopped!");
}
});
});