javascript - 为什么当我尝试 .clone() 环聊时它没有出现？

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