jQuery: Любой способ «обновить» обработчики событий?

Question

У меня есть два divs, один из которых содержит некоторые вещи, а другой - все возможное. Щелчок по одному из divs перенесет элементы в другой div. Код, который я придумал это:

$("#holder > *").each(function() { 
    $(this).click(function(e) { 
     $(this).remove(); 
     $("#bucket").append(this); 
    }); 
}); 

$("#bucket > *").each(function() { 
    $(this).click(function(e) { 
     $(this).remove(); 
     $("#holder").append(this); 
     }); 
}); 

Это один работает отлично, за исключением того, что обработчики событий должны быть обновлены, как только я добавить или удалить элементы. Я имею в виду, что если я сначала нажму на элемент, он будет добавлен в другой div, но если я снова нажму на этот элемент, ничего не произойдет. Я могу сделать это вручную, но есть ли лучший способ достичь этого?

Answer 1

Попробуйте jquery live events .. $ .live (eventname, function) будет привязываться к любым текущим элементам, которые соответствуют, а также к элементам, добавленным в 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.

Я предлагаю вам обратиться к this answer за обновленным примером.

Answer 2

Вы посмотрели функцию jQuery's live?

Answer 3

РЕДАКТИРОВАТЬ: не использовать вживую, это не рекомендуется!

Воспользуйтесь тем, что события пузырь. Использование .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); 
    }); 
}); 

любой нажмите на любой элемент (существующий в момент привязки или нет) будет пузыриться (если вы не вручную захватили событие и прекратил распространение). Таким образом, вы можете использовать это event delegation для привязки только двух событий, по одному на каждый контейнер. Каждый щелчок, который прошел тест на селектор 2-го аргумента (в данном случае, > *, удалит что элемента, а затем добавить его в альтернативный контейнер, как accesesed по things.eq(Number(!index))

Answer 4

Здесь вы идете, используя более интуитивный delegate 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); 
}); 

Answer 5

во-первых, live осуждается во-вторых, освежающий, не то, что вы хотите, Вам просто нужно прикрепить обработчик щелчка к правильному источнику, в данном случае: документ

Wh. en do

$(document).on('click', <id or class of element>, <function>); 

обработчик клика прилагается к документу. Когда страница загружается, обработчик клика присоединяется к определенному экземпляру элемента. Когда страница перезагружается, этот конкретный экземпляр ушел, поэтому обработчик не регистрирует никаких кликов. Но страница остается так, чтобы привязать обработчик кликов к документу. Простой и легкий.