彈出懸停未觸發動態影像

我有一個包含多個影像的 div，每個影像都有一個帶有內容的彈出框，它作業正常。我遇到的問題是我想通過懸停觸發影像彈出框，而我現在使用的方法適用于靜態影像，但是當我將影像動態添加到主 div 并懸停在該影像上時，彈出框不會扳機。如何調整我的代碼以使其也支持任何動態添加的元素？任何幫助表示贊賞。提前致謝。

要復制單擊附加按鈕并滾動到最右側并將滑鼠懸停在新添加的影像上，該影像不會在懸停時觸發彈出框，但其他靜態影像會觸發。

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 class="infoBar" id="infoBar">
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
</div>

<div class="infoBarPopoverContent"></div>

uj5u.com熱心網友回復：

根據我從您的代碼中了解到的是，您必須像這樣在動態附加之后附加事件偵聽器

先將事件監聽器包裹在函式內部，然后在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

標籤：

上一篇：jquery中的復雜徑向漸變

下一篇：使用.append的可搜索下拉選單不起作用