Question

这是我的代码：http://codepen.io/anon/pen/pjxrmO

HTML：

<button>Create a new hangout</button>
<hr />
<div id="container">
  <p id="hello">hello</p>
<div id="hangout" class="g-hangout" data-render="createhangout"></div>

</div>
<script src="https://apis.google.com/js/platform.js" async defer></script>

jQuery的：

$(document).ready(function() {
  $('button').on('click', function() {
   console.log('hello world');
     $('p').clone().appendTo('#container');
    $('#hangout').clone().appendTo('#container');
  });
});

我很困惑为什么当我尝试$（'p'）。clone（）。appendTo（'＃container'）当按钮被点击时段落按预期克隆，但是没有克隆。

Answer 1

<div id="hangout">不会保留在DOM中，因为它是在原始标记中写的。

当Google的API设置环聊按钮时，它会更改或替换元素：

<div id="___hangout_0" style="...">

因此，当.click事件发生时，id="hangout"选择器不再有#hangout的元素匹配。

$('button').click(function () {
  console.log( $('#hangout').length ); // 0
});

为了能够克隆它，您必须调整选择器以匹配正在设置的id。

$('#___hangout_0').clone().appendTo('#container');

您还可以创建新的<div>并将其呈现为按钮using gapi.hangout.render()。

$(document).ready(function () {
  var hangouts = 0;

  $('button').click(function () {
    $('#hello').clone().appendTo('#container');

    var hangout = $('<div>').appendTo('#container').get(0);
    gapi.hangout.render(hangout, { 'render': 'createhangout' });
  });
});

为什么当我尝试.clone（）一个环聊时它没有出现？

1 个答案: