我已经建立了一堆divs,可以在悬停在悬停的情况下打开弹出窗口。单击时,这些按钮打开一个引导模式,内容取决于启动Div的ID。到目前为止一切都很好。
,但是现在我想使弹出窗口本身可单击并能够启动模态。没关系,但是我无法显示模式内容,因为我的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"
});
尝试这样的东西。您是对的,使用$(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);
});