0

这是我的代码笔: 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') 单击按钮时段落会按预期克隆,但不会克隆。

4

1 回答 1

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>并将其呈现为使用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' });
  });
});
于 2015-11-08T04:18:34.270 回答