Jquery 弹出窗口克隆丢失点击事件

Question

我在页面中有一次点击事件。单击后 div 被克隆。但在单击 "popover" 后附加到第一个 div。

这是我创建的示例：https://jsfiddle.net/stinky/d65swy7z/

克隆后，弹出窗口仅在第一次点击时显示。

我试过了

$('.click').on(function(){
  $(this).webuiPopover({url:'#popover-content'});
});

但不起作用。

这是我使用的 popover 插件：https://github.com/sandywalker/webui-popover

Answer 1

您的代码有几个问题：

$('.click').clone(true) 将 clone 方法应用于所有当前存在的 .click 节点，但您只希望它克隆 1 个节点，而不是所有节点。
$('#container').html($cln); 将用一个克隆替换 #container 的全部内容。你要的是$('#container').html($cln);。在你的情况下，由于上面解释的行为，它看起来像是在工作（所有项目都被克隆，而不是只有一个）。
您需要在没有事件的情况下进行克隆，否则，如您所见，所有克隆都会复制原始文件，即使在弹出窗口的位置也是如此。
由于上述原因，您需要为新克隆注册一个新的弹出窗口（因为您不希望它使用与原始弹出窗口相同的弹出窗口）
由于您的弹出框选项指定了一个 #popover-content id 作为内容，弹出框插件似乎 wrap/replace 该 ID 处的节点具有实际弹出框控件的结构。您现在将有许多元素使用相同的弹出窗口内容，因此您需要按照文档 https://github.com/sandywalker/webui-popover#default-options 中所述禁用缓存，以便能够为所有弹出窗口实例重复使用相同的内容。

这是您的代码的更新版本：

var $target = $('.click');
var popoverOptions = {
  url: '#popover-content',
  cache: false
};

$('.clone').on('click', function() {
  var $cln = $target.clone(false);
  $cln.appendTo($('#container'));
  $cln.webuiPopover(popoverOptions);
});

$target.webuiPopover(popoverOptions);

<script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css" rel="stylesheet" />
<a class="clone" href="javascript:void(0)">clone</a>
<br>
<br>
<br>
<a class="click" href="javascript:void(0)">click1</a>
<div id="container"></div>
<div id="popover-content" style="display: none;">
  HI!
</div>

Jquery 弹出窗口克隆丢失点击事件

Jquery popover clone loses click event

javascript

jquery

popover