Почему, когда я пытаюсь .clone(), видеовстреча не появляется?

Вот моя кодовая ручка: 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') абзац клонируется, как и ожидалось, при нажатии кнопки, но не клонируется.


javascript jquery google-api google-hangouts
person LNA    schedule 08.11.2015    source источник
comment
Извините, jQuery не был сохранен, когда я его добавил. Сохранил сейчас. Остается вопрос.   -  person LNA    schedule 08.11.2015
comment
ОБНОВЛЕНИЕ: codepen.io/lindapeng/pen/WQaZeJ   -  person LNA    schedule 08.11.2015

Ответы (1)


arrow_upward
1
arrow_downward

<div id="hangout"> не остается в DOM, поскольку он был записан в исходной разметке.

Поскольку API Google настраивает кнопку Hangout, он изменяет или заменяет элемент:

<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' });
  });
});
person Jonathan Lonowski    schedule 08.11.2015
comment
Если вы хотите клонировать элементы, не используйте идентификаторы в качестве селекторов, вместо этого используйте классы. - person David Gomez; 08.11.2015
comment
@DaveGomez В этом случае элемент не остается с class для его выбора (несмотря на то, что он начинается с одного - class="g-hangout"). В противном случае я бы, конечно, согласился. - person Jonathan Lonowski; 08.11.2015
comment
Извините Джонатан, мой комментарий был для LNA. Ваше решение в порядке ???????? - person David Gomez; 08.11.2015