[英]Draggabilly not adding event to newly added element
I'm using desandro draggabilly and I'm having a problem when inserting a new element. 我正在使用desandro draggabilly ,我在插入新元素时遇到问题。 It seems that the event is not firing on the new element that was added.
似乎事件没有触发添加的新元素。
Here's a jsfiddle . 这是一个jsfiddle 。
Here's the code as well. 这是代码。
HTML HTML
<div class="box draggable">1</div>
CSS CSS
.box {
width: 200px;
height: 200px;
border: 1px solid red;
display: block;
}
JQUERY JQUERY
$(document).ready(function () {
$.bridget('draggabilly', Draggabilly);
var $draggable = $('.draggable').draggabilly({
axis: 'x'
});
$draggable.on('dragEnd', function(e, p) {
$(this).parent().prepend('<div class="box draggable">2</div>');
$(this).prev().addClass('draggable')
$(this).remove();
});
});
On the code below when I dragged div 1, on dragEnd
it will insert div 2 that has a class of draggable
then remove div 1. The problem here is that div 2 is not being draggable even though it has a class of draggable
. 在下面的代码中,当我拖动div 1时,在
dragEnd
上它将插入具有draggable
类的div 2然后删除div 1.这里的问题是div 2即使它具有draggable
的类也不可draggable
。
You need to re-initialize it after prepending
since it is added to DOM dynamically and event draggabilly
will not be attached to it. 您需要在
prepending
后重新初始化它,因为它会动态添加到DOM,并且不会附加event draggabilly
。 So below will fix the issue: 以下将解决问题:
$draggable.on('dragEnd', function(e, p) {
$(this).parent().prepend('<div class="box draggable">2</div>');
$('.draggable').draggabilly({
axis: 'x'
}); //re-initialize again
$(this).remove();
});
UPDATE UPDATE
Now if you want to call dragend
event to the element you add and keep on incrementing the number on dragend
just keep a global variable say i
and increment it everytime as below: 现在,如果你想打电话
dragend
事件的元素添加和不断增加的数量dragend
只保留一个全局变量,说i
和如下每次增加它:
var i=1; //global variable
$(document).ready(function () {
$.bridget('draggabilly', Draggabilly);
$('.draggable').draggabilly({
axis: 'x'
});
$(document).on('dragEnd','.draggable', function(e, p) {
i++; //increment it
$(this).parent().prepend('<div class="box draggable">'+i+'</div>');
//display text as i
$('.draggable').draggabilly({
axis: 'x'
});
$(this).remove();//remove previous one
});
});
You have to initialize every time on creation of your div and bind event then something as below - 每次创建div和绑定事件时都必须初始化,然后如下所示 -
$(document).ready(function () {
$.bridget('draggabilly', Draggabilly);
var $draggable = $('.draggable').draggabilly({
axis: 'x'
});
$draggable.on('dragEnd', callback);
});
var co=2;
function callback(e, p) {
$(this).parent().prepend('<div class="box draggable">'+co++ +'</div>');
$(this).prev().addClass('draggable')
$(this).remove();
$(".draggable").draggabilly({
axis: 'x'
});
$(".draggable").on('dragEnd', callback);
}
LIVE http://jsfiddle.net/mailmerohit5/L9kgeu3f/ 现场 http://jsfiddle.net/mailmerohit5/L9kgeu3f/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.