0

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

  1. 运行 jsfiddle 项目
  2. 将鼠标悬停在 ipsum 文本上
  3. 在显示的引导弹出窗口上，单击“显示更多>>”链接
  4. 点击的功能是触发并显示一个新的窗口 800x600
  5. 关闭这个窗口
  6. 转到第 2 步。
  7. 而不是第 4 步，该功能没有被触发，而是打开了一个新选项卡

我确实希望每次用户单击“显示更多>>”时触发该功能。

我很确定 javascript 代码是问题所在：范围、变量、冲突……我不知道。

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

演示在这里。我讲的功能是：

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

1 回答 1

1

你的问题很“简单”。

首先，您有一个生成弹出 html 内容的函数“formatPopoverContent”。您在此处绑定点击事件。

问题是该函数执行一次，但由引导程序生成的弹出框创建弹出框 div 并将其插入到 DOM 中（当您悬停时，会创建 div，鼠标移出时会从 DOM 中删除 div）。在您的函数中，您使用 cordialManualLink.on('click', ...) 绑定点击事件，其中 cordialManualLink 是该函数首次创建，但随后被弹出框删除（我不知道我是否非常清除…）。而你绑定事件的方式，新创建的元素并没有被绑定。

这就是为什么在您的小提琴中，不仅当您第二次单击时，如果您将鼠标悬停，然后鼠标悬停，然后再次悬停（不单击第一次），您将不会得到一个新窗口。

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

所以解决方案是简单地做：

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

代替

cordialManualLink.on('click', …);
于 2013-05-23T10:07:43.347 回答