Image iterating multiple times in popover

Question

I have a div with multiple images that when hovered on the images triggers a popover that contains the image that was hovered on and It kinda works. The problem is when I hover on another image It appends the new hovered image to the popover but it doesn't remove the previous hovered image. I tried to remove the previous image in popover but whenever I do it breaks the program and the hovered image doesn't show on the popover anymore. Where did I go wrong? How can I make the specific hovered image only show on the triggered popover?

I commented out what I tried to remove the previous image before appending the new image so that you guys can look at the current iterating image without the program breaking.

UPDATE:

After I remove the previously appended image the program doesn't show the image in the popover but when you inspect the element it shows that the image is there for some reason it is not visible in the popover though. Confusing..??

function appendImg() {
  const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
  $('.infoBar').append('')
  addEvent();
}

var popOverSettings2 = {
  selector: '.infoBar .imgWrap',
  container: 'body',
  html: true,
  trigger: "manual",
  placement: 'top',
  sanitize: false,
  animation: false,
  content: function() {
    setTimeout(() => {
      $('.popover').css({
        'width': '20%',
        'height': '20%',
        'overflow': 'auto'
      })
    })
    if ($(this).attr('class') == 'imgWrap') {
      const currnetInfoBarElementView = $(this).attr('id')
      let source = $("#" + currnetInfoBarElementView).children()

      //This is what I tried removing the previous appended container so that it won't iterate but it doesn't work
      //$('.infoBarElementContentView').remove()

      $('.infoBarPopoverContent').append('')
      source.clone(true).addClass('dataDisplayClone').appendTo('.infoBarElementContentView')
      $('.dataDisplayClone img').css({
        'width': '100%',
        'height': '100%'
      })
      return $('.infoBarPopoverContent').html();
    }
  }
}


function addEvent() {
  $(function() {
    $('.infoBar .imgWrap').popover(popOverSettings2)
      .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function() {
          $(_this).popover('hide');
        });
      }).on("mouseleave", function() {
        var _this = this;
        if (!$(".popover:hover").length) {
          $('.popover').popover('hide');
        }
      });
  });
}

addEvent()

button {
  position: absolute;
  top: 0%;
  left: 0%;
}

.infoBar {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 30%;
  max-width: 95%;
  height: 160px;
  margin: auto;
  column-gap: 25px;
  background-color: green;
  overflow-x: auto;
}

.infoBar .imgWrap {
  height: 100%;
  cursor: pointer;
}

.infoBar .imgWrap img {
  height: 100%;
  cursor: pointer;
}

.infoBarPopoverContent {
  display: none;
}

.popover .popover-body {
  overflow-x: auto;
}

user_1891677 · Answer

You have to empty .infoBarPopoverContent before you add the current image to it.

So this:

 $('.infoBarPopoverContent')
   .append('')

becomes this:

 $('.infoBarPopoverContent')
   .empty()
   .append('')

See it working:

function appendImg() {
  const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
  $('.infoBar').append('')
  addEvent();
}

var popOverSettings2 = {
  selector: '.infoBar .imgWrap',
  container: 'body',
  html: true,
  trigger: "manual",
  placement: 'top',
  sanitize: false,
  animation: false,
  content: function() {
    setTimeout(() => {
      $('.popover').css({
        'width': '20%',
        'height': '20%',
        'overflow': 'auto'
      })
    })
    if ($(this).attr('class') == 'imgWrap') {
      const currnetInfoBarElementView = $(this).attr('id')
      let source = $("#" + currnetInfoBarElementView).children()

      //This is what I tried removing the previous appended container so that it won't iterate but it doesn't work
      //$('.infoBarElementContentView').remove()

      $('.infoBarPopoverContent').empty().append('')
      source.clone(true).addClass('dataDisplayClone').appendTo('.infoBarElementContentView')
      $('.dataDisplayClone img').css({
        'width': '100%',
        'height': '100%'
      })
      return $('.infoBarPopoverContent').html();
    }
  }
}


function addEvent() {
  $(function() {
    $('.infoBar .imgWrap').popover(popOverSettings2)
      .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function() {
          $(_this).popover('hide');
        });
      }).on("mouseleave", function() {
        var _this = this;
        if (!$(".popover:hover").length) {
          $('.popover').popover('hide');
        }
      });
  });
}

addEvent()

button {
  position: absolute;
  top: 0%;
  left: 0%;
}

.infoBar {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 30%;
  max-width: 95%;
  height: 160px;
  margin: auto;
  column-gap: 25px;
  background-color: green;
  overflow-x: auto;
}

.infoBar .imgWrap {
  height: 100%;
  cursor: pointer;
}

.infoBar .imgWrap img {
  height: 100%;
  cursor: pointer;
}

.infoBarPopoverContent {
  display: none;
}

.popover .popover-body {
  overflow-x: auto;
}

Image iterating multiple times in popover

1 Answers