$('.products ul-li'）.length在我注入照片之前输出0，在照片出现时输出5，但当我

当我点击removePhotos按钮时，它将输出照片li长度。最初，当DOM加载它们时没有照片，所以它会输出0，当我单击显示照片时，我使用ajax注入我的照片。在我插入我的照片并单击removePhotos按钮后，它输出5，这是我拥有的照片数量，但问题是当我删除照片并单击removePhotos按钮时，它仍然输出5，而它应该输出0。关于如何解决这个问题有什么建议吗？

我的html

    <div id="paris">
     <h1>CRAPPY CHEESE</h1>
     <button>Get Paris Photos</button>
     <span>Remove Photos</span>
     <ul class="photos">
     </ul>
    </div>

我的javascript

    function Tour(el) {
      var tour = this;
      this.el = el;
     this.hidePhotos = function() {
      alert($('.photos ul li').length);
      $('.photos').fadeOut();
     }
     this.fetchPhotos = function() {
       $.ajax('photos.html', {
          data: {location: $("#tour").data(this.el)},
          success: function(response) {
           this.el.find('.photos').html(response).fadeIn();
          },
          context: tour,
          error: function() {
            this.el.find('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');
          },
          timeout: 3000,
          beforeSend: function() {
            this.el.addClass('is-fetching');
          },
          complete: function() {
            this.el.removeClass('is-fetching');
          }
        });
      };
   var kirt = this.el.on('click.showPhotos', 'button', this.fetchPhotos);
   var pooh = this.el.on('click.removePhotos', 'span', this.hidePhotos);
  }
  $(document).ready(function() { 
     var paris = new Tour($('#paris'));
  });