Почему не срабатывают .remove и .removeClass?

Question

[Vadim Stepanenko]

Всем привет!
Столкнулся со следующей проблемой

Есть переменная count, которая отвечает за количество товаров в корзине.
Если count == 0, то с помощью .append выводится кнопка "Забрать все", если count =! 0, то выводится кнопка "Удалить все":

$(".item").click(function(){ // при клике на товар
if(count == 0){
	$('.buttondiv').html(''); // очищаем блок buttondiv
	$('.buttondiv').append('<span id="add">Take All</span>'); // добавляем в него спан "Забрать все"
}
if(count != 0){
	$('.buttondiv').html(''); // очищаем блок buttondiv
	$('.buttondiv').append('<span id="remove">Clear</span>'); // добавляем в него спан "Удалить все"
}
});

$("#remove").click(function(){
	// код //
	console.log('Удалено');  // пример
});
$("#add").click(function(){
	// код //
	console.log('Добавлено');  // пример
});

При таком коде кнопки меняются, в зависимости от кол-во товаров в корзине, но кнопки не работают.
Если изначально в html добавить Take All, без всяких условий и замен, то функция будет срабатывать. Подскажите, в чем проблема

Полагаю, что это из-за того, что появляются новые теги добавления и удаления товаров, и jq на уже "модифицированной" странице не может найти эти спаны

Comments

[Ярослав Иванов]

$(document).on("click", "#remove", function() {
// код //
  console.log('Удалено');  // пример
})

[Вадим]

$('#remove').bind('click', function() {
	console.log('Удалено');
});

$('#add').bind('click', function() {
	console.log('Добавлено');
});

[Вадим]

Хотя правильнее через on, если bind то при удалении элемента и обработчик удалится.

$(document).on('click', '#remove' function() {
	console.log('Удалено');
});

$(document).on('click', '#add' function() {
	console.log('Добавлено');
});

[Anton fon Faust]

Не работает оно, потому что на тот момент, когда вы вешаете обработчики событий:
$("#remove").click(...);
$("#add").click(...);

у вас совершенно другой список элементов в вашем dom.
В вашем случае, нужно сразу же после append делать навешивание нового обработчика событий.
например, так:

$(".item").click(function(){ // при клике на товар
if(count == 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="add">Take All</span>'); // добавляем в него спан "Забрать все"
  $("#remove").click(function(){
    // код //
    console.log('Удалено');  // пример
  });
}
if(count != 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="remove">Clear</span>'); // добавляем в него спан "Удалить все"
  $("#add").click(function(){
    // код //
    console.log('Добавлено');  // пример
  });
}
});

но лучше вот так (паттерн наблюдатель):

$(".item").click(function(){ // при клике на товар
if(count == 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="add">Take All</span>'); // добавляем в него спан "Забрать все"
}
if(count != 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="remove">Clear</span>'); // добавляем в него спан "Удалить все"
}
});

$(".buttondiv").click(function(e){
    if(e.target.id === 'remove') {
      console.log('Удалено');
    } else if(e.target.id === 'add') {
      console.log('Добавлено');
    }
});

Answer 1

[Максим]

Самым простым решением будет "добавление обработчиков" в тело функции.