这是我的代码笔: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') 时,单击按钮时段落会按预期克隆,但不会克隆。
最佳答案
<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' });
});
});
关于javascript - 为什么当我尝试 .clone() 环聊时它没有出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33590489/