应用jQueryUI的可调整大小的小部件动态创建的元素
这个问题是不是有关事件代表团
我想jQuery的可调整大小的小部件应用到一系列的div标签有可能被动态创建。应用jQueryUI的可调整大小的小部件动态创建的元素
有没有办法使用的行为像事件委托动态地添加到新元素的jQuery 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>编辑：我不是问事件委托，我询问是否有办法委托可调整大小的小部件将其动态添加到新创建的元素。
一旦添加新元素，您需要重新初始化col.resizable();。 请检查下面的工作代码：
$(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>为什么要投票？它工作 –
感谢您的答案，我试图避免这样做，由于重复的代码。 –
为动态创建的元素，你必须重新初始化函数resizable（），而不会不会工作 –
试试这个代码，它的工作对我来说
$("#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!");
}
});
});
我知道这是一个老帖子，但我仍觉得我可以发布更好的答案以备将来参考，因为在你的评论中你已经提到了代码重用，而不是多次将这个插件应用到元素上，所以这个解决方案应该克服这些问题。
$(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>
的[事件绑定上动态创建的元素？]可能重复（http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements） – melancia
可能重复[在jQuery中，如何将事件附加到动态html元素？]（http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements） – melancia
[Jquery如何在动态创建的元素上绑定点击事件？]的可能重复？（http://stackoverflow.com/questions/17558167/jquery-how-to-bind-click-event-on-dynamically-created-elements） – melancia