jquery克隆多个实例为什么

Question

希望可以帮助,尝试似乎有效的Jquery克隆,但我得到"多个"克隆而不是单击克隆"压制"按钮.

例如:我想克隆这个:

echo '<select class="hello">';
    foreach ($pageposts as $post):
    echo '<option>'.$post->post_title.'</option>';
    endforeach;
    echo '</select>';

点击这个

echo '<input type="button" id="rp" value="add">';

是的,来自WordPress,是的,"hello"类来自JQuery页面

我的JQuery函数是:

$j=jQuery.noConflict();
$j(document).ready(function() {
$j('#rp').click(function(){ 
$j('.hello').clone().appendTo('#goodbye');
});
});

所以我的"整体代码snippit"看起来像这样:

echo '<select class="hello">';
foreach ($pageposts as $post):
echo '<option>'.$post->post_title.'</option>';
endforeach;
echo '</select>';
echo '<div id="goodbye"></div>';
echo '<input type="button" id="rp" value="add">';

我在第一次按下时克隆"一次",但随后它会以倍数表示:

1点击给出1个克隆加1个原始 - 我想要的

2次点击提供3个克隆加1个原始 - 不是我想要的1个原件加2个

3次点击提供7个克隆加1个原始 - 不是我想要的我想要1个原件加3个等等.

建议请.谢谢

Answer 1

这是因为你的选择器正在寻找一个类:

$j('.hello')

每当你克隆并将其附加到另一个元素时,你就会添加另一个.hello元素,因此克隆.hello它可以找到的每个元素.

也许您应该在克隆时删除类名:

$j('.hello').clone().removeClass('hello').appendTo('#goodbye');

或者甚至可能改变它:

$j('.hello').clone().removeClass('hello').addClass('cloned_hello').appendTo('#goodbye');

您可能希望添加一个不同的类,这样您的CSS仍然可以工作,但最终这就是您获得多个克隆项目的原因.