Question

我想向您展示一个jQuery / bootstrap代码。我在jsfiddle：demo中提取所需的代码。行为是：

运行jsfiddle项目
鼠标悬停在ipsum文本
在显示的bootstrap popover上，点击“显示更多＆gt;＆gt;”链路
点击功能触发，显示新窗口800x600
关闭此窗口
转到第2步。
而不是步骤4.，不会触发该功能，而是打开新选项卡

我希望每次用户点击“显示更多＆gt;＆gt;”时触发该功能。

我很确定javascript代码是问题：范围，变量，冲突......我不知道。

您对出现问题有什么意见，建议或良好做法吗？

The demo is here。我告诉的功能是：

function (e) {
    e.preventDefault();
    var width  = 800,
        height = 600,
        left   = ($(window).width()  - width)  / 2,
        top    = ($(window).height() - height) / 2,
        url    = this.href;
    var opts   = 'status=1' +
                 ',width='  + width  +
                 ',height=' + height +
                 ',top='    + top    +
                 ',left='   + left;
    window.open(url, 'manual', opts);
    return false;
}

谢谢

Answer 1

你的问题很“简单”。

首先，您有一个生成popover html内容的函数“formatPopoverContent”。你在这里绑定点击事件。

问题是函数执行一次，但是bootstrap生成的popover会创建popover div并在动态中将它插入DOM中（当你悬停时，创建div，并在鼠标输出时删除div DOM）。在你的函数中，你使用cordialManualLink.on（'click'，...）绑定click事件，其中cordialManualLink是由函数首次创建的，但随后被popover删除（我不知道如果我非常明确…）。以及绑定事件的方式，新创建的元素不受约束。

这就是为什么在你的小提琴中，不仅当你第二次点击时，如果你悬停，然后鼠标移动，然后再次悬停（不用第一次点击），你就不会有新的窗口。

解决方案是“实时”绑定click事件，这样即使创建了新元素，它们也会被绑定。

因此解决方案就是：

$(document).on('click', cordialManualLink, …);

而不是

cordialManualLink.on('click', …);

我的引导程序弹出窗口不会触发事件定义的函数

1 个答案: