Как клонировать переменную HTML-элемент в JQuery

Question

У меня есть набор элементов div, которые являются элементами базы данных, и я хочу установить событие для каждого из них, чтобы, если я щелкну по одному из них, оно было клонировано.Я попробовал что-то, но это не сработало, вот код на моей странице:

<% @ideas.each do |idea| %>    
<div id="idea_<%=idea.id%>" class="idea">
    <%= idea.title %>
</div>
<% end %> 

А вот код CoffeeScript:

ideas = document.getElementByClassName("idea") 
for iter in [0..ideas.length - 1]
  do ->
    ideas[iter].(get_id).click -> ideas[iter].(get_id).clone().appendTo('.container');

Есть идеи?

Answer 1

Вот слегка измененная версия, которая должна делать то, что вы ищете.В Javascript / Coffeescript всегда следует помнить о том, в какой области будет выполняться ваш код. В этом случае очень важно использовать ключевое слово do, чтобы переменная iter была правильно перехвачена.Без этого, когда вы щелкаете мышью по любой идее, она всегда клонирует последнюю идею, потому что к тому моменту, когда обработчик щелчка действительно выполнится, iter достигнет конца цикла.

ideas = document.getElementByClassName("idea") 
for iter in [0...ideas.length]
  do (iter) ->
    ideas[iter].click -> ideas[iter].clone().appendTo('.container');

Вотмодифицированная версия, которая немного чище.jQuery может обработать всю эту итерацию за вас.

$('.idea').click ->
    $(@).clone().appendTo('.container')

Что вы пытаетесь сделать с частью 'get_id'?Я просто игнорирую это, поэтому дайте мне знать, если я неправильно понял.

Редактировать:

Чтобы клонировать только один раз, самый простой способ - это использовать jQuery's 'one' метод вместо 'bind'.

$('.idea').one 'click', ->
    $(@).clone().appendTo('.container')