गतिशील रूप से बनाए गए तत्वों - jquery, jquery-ui, jquery-ui-resizable

$(function() {
var cols = $("#cols").children(".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 = $("#cols").children(".col");

});
});

.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>

$(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>

$(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>