مشکل در بکارگیری append

[Mr.Brown]

با سلام،
دو سری دکمه در دو div تعریف کرده ام گفتم هرگاه روی دکمه های div اول کلیک شد آن دکمه remove شود. و هرگاه روی دکمه های div دوم کلیک شدن آن دکمه به دکمه های div اول append (اضافه) شود. اضافه هم می شود اما دکمه اضافه شده به div اول از div دوم حذف می شود! و زمانی که به div اول اضافه می شود دیگر با کلیک حذف (remove) نمیشود!

مشکل این کد کجاست لطفا راهنمایی کنید.

<script src="jquery-1.11.1.min.js"></script>
<meta charset="utf-8">


<div id="top_cats_list" style="float: right">
<label for="cat">لیست دسته ها:</label>
<button class="top_cat" type="button">X cate1</button>
<button class="top_cat" type="button">X cate2</button>
<button class="top_cat" type="button">X cate3</button>

</div>

<div id="feed_cats_list">
<p>لیست دسته بندی ها:</p>
<button class="feed_cat" type="button">cat1</button>
<button class="feed_cat" type="button">cat1</button>
<button class="feed_cat" type="button">cat1</button>
<button class="feed_cat" type="button">cat1</button>
</div>

<script>

$(document).ready(function(){

/*remove category button from top section*/
$('.top_cat').click(function(){
$(this).remove()
});

/*add category button to top section*/
$('.feed_cat').click(function(){
var n = $(this);
n.attr("class","top_cat");
$('#top_cats_list').append(n)
});

})

</script>

[nasrin55]

باید از متد on استفاده کنید تا شی هایی که جدید ایجاد میشه یعنی بعد از لود صفحه، رو بشناسه.


$(document).ready(function() {

/*remove category button from top section*/

$(document).on("click", ".top_cat", function() {
$(this).remove()
});
/*add category button to top section*/
$(document).on("click", ".feed_cat", function() {
var n = $(this);
n.attr("class", "top_cat");
var newRow = "<button class='top_cat' type='button' style='width: 50px; height:18px'>" + $(this).text() + "</button>";
$('#top_cats_list').append(newRow);
});

})