javascript - clone() 不绑定(bind)事件/插件

Question

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

我的代码:HTML :

<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'; 

希望对您有所帮助!