克隆() 剂量不绑定事件/插件

Question

我有视差附加到我克隆的同一个div，但在我克隆视差后停止对克隆的元素工作。
检查我的例子：https://codepen.io/anon/pen/rYOrEO

我的代码：目录 ：

<div class="container">
  <a href="#" class="clone">Clone</a>
</div>
<section class="content">
  <div class="jumbotron text-center bg-faded my-5" style="background: url('http://lorempixel.com/1200/600/abstract/1') no-repeat center;" data-paroller-factor="0.5">
    <h1 class="heading-1 py-5 text-white">Hello Parallax!</h1>
  </div>
</section>

JavaScript：

$(window).paroller();
$(function(){
  $('.clone').on('click', function() {
    alert('hi');
    $(".jumbotron").clone().appendTo(".content");
  });
});

例 ： https://codepen.io/anon/pen/rYOrEO

提前感谢

Answer 1

我以前遇到过类似的问题，可以做到。这是 CSS 在页面加载时生效而不是克隆时生效的问题。

如果我没记错修复它，您需要创建一个类似于此示例的克隆div 对象：

// will be different for you!! but might set you on the right direction
var divToClone = document.getElementsByID("#cloneMe");
var clone = divToClone.cloneNode(true);
var element = clone.getElementsByTagName("h1"); 

现在有了我的var元素，我可以像这样再次添加属性和样式

//Nothing to do with parallax here but look at you CSS and fill it in again like below
element.innerHTML = "Whatever you want or need"; 
element.style['background']= "url(/iwa/images/16x16/randomExample.png) no-repeat, fixed";
element.style['background-position']='center right';
element.style['border']='none'; 

希望对您有所帮助！