jQuery: Какой-либо способ “обновить” обработчики событий?
У меня есть два отделения, то, которое содержит некоторый материал и другой со всем возможным материалом. Нажатие на одно из отделений передаст объекты другому отделению. Код, который я придумал:
$("#holder > *").each(function() {
$(this).click(function(e) {
$(this).remove();
$("#bucket").append(this);
});
});
$("#bucket > *").each(function() {
$(this).click(function(e) {
$(this).remove();
$("#holder").append(this);
});
});
Эти работы отлично, за исключением того, что обработчики событий должны быть обновлены, после того как я добавляю или удаляю элементы. То, что я имею в виду, если я сначала нажимаю на элемент, добавляется к другому отделению, но если я нажимаю на этот элемент снова, ничего не происходит. Я могу сделать это вручную, но являюсь там лучшим способом достигнуть этого?
4 ответа
Попробуйте живые события jquery .. $ .live (имя события, функция) привяжется к любым текущим элементам, которые совпадают, а также к элементам, добавленным в Dom в будущем с помощью манипуляций с javascript.
пример:
$("#holder > *").live("click", function(e) {
$(this).remove();
$("#bucket").append(this);
});
$("#bucket > *").live("click", function(e) {
$(this).remove();
$("#holder").append(this);
});
Важно:
Обратите внимание, что $. Live с тех пор удален из jQuery (начиная с версии 1.9) и что вместо этого вы должны использовать $. On .
Я предлагаю вам обратиться к этому ответу для получения обновленного примера.
EDIT: не используйте live, он устарел!
Воспользуйтесь тем, что события "пузырятся". Используя .on():
var = function( el1, el2 ) {
var things = $('#holder, #bucket');
things.each(function( index ) {
// for every click on or in this element
things.eq(index).on('click', '> *', function() {
// append will remove the element
// Number( !0 ) => 1, Number( !1 ) => 0
things.eq( Number(!index) ).append( this );
});
});
любой клик на любой элемент (существующий на момент привязки или нет) будет вызывать пузырьки (при условии, что вы не перехватили событие вручную и не остановили распространение). Таким образом, вы можете использовать делегирование событий для привязки только двух событий, по одному на каждый контейнер. Каждый клик, прошедший проверку селектора 2-го аргумента (в данном случае > *), будет удалять этот элемент, а затем добавлять его в альтернативный контейнер, доступный по things.eq( Number(!index) )
Вот так, используя более интуитивный API делегата:
var holder = $('#holder'),
bucket = $('#bucket');
holder.delegate('*', 'click', function(e) {
$(this).remove();
bucket.append(this);
});
bucket.delegate('*', 'click', function(e) {
$(this).remove();
holder.append(this);
});