popover hover not triggering on dynamic images-CodePudding

I have a div with multiple images with each image having a popover with content attached to it and it works fine. The problem I'm having is I wanted to trigger the image popover by hover and the method I'm using right now works fine for static images but When I dynamically add images to the main div and hover on that image a popover won't trigger. How can I adjust my code so that it also supports any dynamically added elements? Any help is appreciated. Thanks in advance.

To replicate click on the append button and scroll to the far right and hover on the newly added image, that image won't trigger a popover on hover but the other static ones do.

function appendImg() {
  $('.infoBar').append('<div ><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
}

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'
      })
    })
    $('.infoBarPopoverContent').append('<p>Popover stuff...</p>')
    return $('.infoBarPopoverContent').html();
  }
}

$(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');
      }
    });
});

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<button onclick='appendImg()'>Click to append img</button>

<div  id="infoBar">
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
</div>

<div ></div>

CodePudding user response：

From what I have understood from your code is that you have to attach the event listener after the dynamic append like this

First wrap up the event listener inside the function, then call the function after the append

function appendImg() {
  $('.infoBar').append('<div ><img 
    src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
      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'
  })
})
$('.infoBarPopoverContent').append('<p>Popover stuff...</p>')
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()

https://jsbin.com/rumabifiqo/edit?output