JavaScript для проверки на событие без обновления страницы

Question

Я мог бы использовать точку в правильном направлении. У меня есть продукт, который я показываю на странице корзины для благотворительных пожертвований. Если кто-то добавляет пожертвование в свою корзину, я смог удалить опцию пожертвования, поскольку она уже есть в корзине. Это сделано потому, что при нажатии кнопки пожертвования страница обновляется и пожертвование добавляется в корзину. У меня проблема в том, что, когда кто-то удаляет пожертвование из корзины, страница не обновляется, и поэтому опция пожертвования не отображается, пока я не обновлю страницу вручную. Я бы опубликовал некоторый код, но у меня его нет, потому что я не уверен, как я делаю страницу, просматривая корзину в основном в цикле, чтобы постоянно проверять, находится ли этот элемент в корзине или нет.

Это код, который я использую для проверки и проверки наличия пожертвования в корзине.

$(document).ready(function() {
var found = false;
$('.bd a').each(function(index, ele){
 if($(ele).html().indexOf('Charity Bucks') > -1){
     found = true;
 }
 })

 if(found){
 $('#divID').css('display','none');
 }
}); 

Answer 1

Проблема связана с отсутствующим оператором else. В вашей логике вы изменяете элемент #divID только в том случае, если вы нашли запись благотворительности, но не в том случае, если вы больше не находите запись благотворительности и уже скрыли элемент. Кроме того, я бы рекомендовал показывать / скрывать элемент через класс css, а не напрямую через свойства css.

$(document).ready(function() {
  $('#remove-donation-button').click(removeDonation());
  var found = false;
  $('.bd a').each(function(index, ele){
    if($(ele).html().indexOf('Charity Bucks') > -1){
      found = true;
    }
  })

  if(found){
    $('#divID').addClass("hide-charity");
  }
}); 

function removeDonation(){
  $('.hide-charity').removeClass('hide-charity');
  /** Actually remove */
}

Answer 2

Я использовал обратный вызов для решения своей проблемы

<script> 

$(document).ready(function() {
var found = false;
$('.bd a').each(function(index, ele){
 if($(ele).html().indexOf('Charity Bucks') > -1){
     found = true;
      var parent = $(ele).parent().parent();
                    var sibs = $(parent).siblings('.group4');
                    $(sibs).find('a').each(function(index2, ele2){
                        console.log(ele2);
                        if($(ele2).html().indexOf('remove') > -1){
                            console.log('found it');
                            $(ele2).on('click', function(){
                                $('#divID').show();
                            });
                        }
                    }); 
 }
 })

 if(found){
 $('#divID').hide();
 }
}); 

</script>

Answer 3

из этого стека

это прослушиватель событий для изменений в классе с классом .bd

$("body").on('DOMSubtreeModified', ".bd", function() {
    // code here
});

попробуйте добавить этот код:

 $("body").on('DOMSubtreeModified', ".bd", function() {
      $('.bd a').each(function(index, ele){
       if($(ele).html().indexOf('Charity Bucks') > -1){
           $('#divID').css('display','none');//or inline-block; or block; as your default css for this element
       }else{
         $('#divID').css('display','inline');
       }
     })
    });