Question

我在页面中有一个点击事件。点击后克隆一个div。但点击＆＃34; popover＆＃34;附加在第一个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的位置。
由于上述原因，您需要为新克隆注册一个新的弹出窗口（因为您不希望它使用与原始版本相同的弹出窗口）
由于您的popover选项指定了#popover-content id用作内容，因此popover插件似乎用该实际popover控件的结构包装/替换该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 popover clone失去了点击事件

1 个答案: