克隆后Div不受功能影响？

Question

这是我在这里的第一篇文章。

我试图制作一个娃娃装扮的东西，而且我有点卡住了。

基本上：

• 用户点击4个类别中的一个→it及其＆＃39;父母被克隆到#base和＃34;穿着＆＃34;标签。 （这有效）
• 用户点击＆＃34;穿着＆＃34;中的克隆div选项卡，它将从#base和＆＃34;穿着＆＃34;中删除tab（但原始的，非克隆的div保留）（这不起作用。没有任何反应。）

这是我到目前为止所做的： https://jsfiddle.net/v0yefez5/14/

＆＃13;

＆＃13;

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];

// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });

＆＃13;

	$( ".categoryButton" ).on( "click", function() {
	  $( ".ThisOneIsActive" ).removeClass( "ThisOneIsActive" );
	  $( this ).addClass( "ThisOneIsActive" );
	  var CategoryNumber = $( ".categoryButton" ).index( this );
	  var CategoryID = "c" + CategoryNumber;
	  $( "#c" + CategoryNumber ).addClass( "ThisOneIsActive" );
	} );


$( ".window img" ).click( function() {
	  var aide = $( this ).attr( 'id' );
	  //console.log( aide );
	  if ( $( this ).hasClass( "onDoll" ) ) {
	    $( this ).removeClass( "onDoll" );
	    $( "#base" ).find( "#" + aide ).remove();
	    $( ".items_on_doll" ).find( "#" + aide ).parent().remove();
	    //console.log( "REMOVED FROM DOLL" );
	  }
	  else {
	    $( this ).addClass( "onDoll" );
	    $( this ).clone().appendTo( "#base" );
	    $( this ).parent().clone().prependTo( ".items_on_doll" );
	    //console.log( "ADDED TO DOLL" );
	  }
	} );

＆＃13;

html,
body {
  font-family: sans-serif;
  margin: 0;
  width: 100%;
  height: 100%;
}

h1 {
  font-size: 48px;
}

.container {
  background: pink;
  width: 700px;
  height: 330px;
  padding: 10px;
}

#base {
  width: 200px;
  height: 330px;
  background: white;
  float: left;
  position: relative;
}

#base img {
  pointer-events: none;
}

#wardrobe_content img[class$="onDoll"] {
  background: red;
}

#roulette {
  float: right;
  width: 400px;
  height: 330px;
  background: yellow;
}

#categoryBar p {
  display: inline-block;
  padding: 7px;
  background: pink;
  margin: 0;
}

p.activeCategory {
  color: #f00;
}

#base img.onDoll {
  position: absolute;
  top: 0;
  left: 0;
}

.window img.onDoll {
  position: absolute;
  top: 0;
  left: 0;
}

.window {
  position: relative;
  background: pink;
  overflow: hidden;
  margin: 5px;
  cursor: pointer;
  background-image: url(https://i.imgur.com/FBCF5Mq.png);
}

.window.hair {
  width: 80px;
  height: 100px;
  background-position: -62px -30px;
}

.window.hair img {
  position: absolute;
  left: -62px;
  top: -30px;
}

.window.skin {
  height: 251px;
  background-position: -48px -49px;
  width: 90px;
}

.window.skin img {
  position: absolute;
  left: -48px;
  top: -49px;
}

.items_on_doll .window {
  background: red;
}

.categoryButton {
  background: pink;
  cursor: pointer;
  padding: 7px;
  display: inline-block;
  margin: 2px;
}

.categoryButton#youreWearing {
  float: left;
  margin-left: -75px;
}

.categoryButton:hover {
  background: red;
}

.categoryButton.ThisOneIsActive {
  background: red;
}

.categoryContent,
.items_on_doll {
  display: none;
}

.categoryContent.ThisOneIsActive,
.items_on_doll.ThisOneIsActive {
  display: block;
  height: 294px;
  overflow: auto;
}

＆＃13;

＆＃13;

＆＃13;