Question

我已经设置了一堆div，在悬停时打开一个popover。单击时，这些按钮打开一个引导模式，其内容取决于启动div的ID。到目前为止，一切都很好。

但是现在我想让popover本身可以点击并且能够启动模态。没关系但我无法显示模态内容，因为我的jQuery脚本无法访问启动的div id。

有什么建议吗？谢谢！

启动div：

<a class="dev_grid-cell">
<div id="crl0_trl2" class="wrapper" data-container="body" data-toggle="popover" data-placement="top" data-content="Content of the popover">
</div>
</a>

javascript

jQuery(document).on("click", ".popover", function (){
  $("#MMmodal").modal("show");
  $("[data-toggle=popover]").popover("hide");
});

// So far, it's ok: the modal launches.

jQuery(document).on("click", ".popover", function (){
  var divID = this.id; // —> Here is the problem
  var fields = divID.split("_");
  var crl = "#"+fields[0];
  var trl = "#"+fields[1];
  $("#crl").children().hide();
  $("#trl").children().hide();
  $(trl).css("display","block");
  $(crl).css("display","block");
  alert(divID); // —> returns "Undefined" or something like "popover457812"
});

Answer 1

尝试这样的事情。你是对的，使用$（this）将引用该文档。但eventObj.target引用实际点击的元素。

jQuery(document).on("click", ".popover", function (eventObj){
  var divID = eventObj.target.id; // —> This may fix the problem
  var fields = divID.split("_");
  var crl = "#"+fields[0];
  var trl = "#"+fields[1];
  $("#crl").children().hide();
  $("#trl").children().hide();
  $(trl).css("display","block");
  $(crl).css("display","block");
  alert(divID);
});

从Bootstrap popover访问div id

1 个答案: