This question is not about event delegation
I would like to apply the jQuery resizable widget to a series of div
tags that could potentially be created dynamically.
Is there a way to use something that behaves like event delegation to dynamically add the jQuery resizable
widget to new elements?
Here's the example (notice how the newly created green elements cannot be resized):
$(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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…