javascript - 如何正确定位点击的div？

我正在创建一个自定义颜色选择器，每当用户单击一种颜色时，他都应该能够在下面的调色板中选择一种颜色来对其进行编辑。有两个问题：


每当用户单击并更改颜色时，其他已被修改或单击的divs都不会保留自己的颜色。
每当用户使用按钮添加新颜色时，该颜色就不可编辑。


我在理解为什么以及如何解决该问题时遇到了麻烦。

这是小提琴：https://jsfiddle.net/Lindow/wwjv4m74/21/

$('#sde-add').click(function(element) {
  $('#sde-results').append('<div class="sde-color" style="background:white;"><input type="text"></div>');
});

$('.sde-color').click(function(element) {
  var sde = $(this);

  $(".atv-color").css({
    'display': 'inline-block',
  });

  $('input[type=radio]').on('change', function(element) {
    sde.find('input').val(element.target.value);

    sde.css({
      'background': element.target.value,
    });
  });
});

.sde-color {
  height: 100px;
  width: 200px;
  display: inline-block;
  cursor: pointer;
}

.atv-color {
  display: none;
  height: 50px;
  width: 100px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>click on any color to see the palette</p>

<div id="sde-container">
  <div id="sde">
    <div id="sde-results">
      <div class="sde-color" style="background:yellow;">
        <input type="text">
      </div>
      <div class="sde-color" style="background:blue;">
        <input type="text">
      </div>
    </div>

    <div class="sde-color-plus" style="background:white;">
      <button id="sde-add">add color</button>
    </div>
  </div>
</div>

<hr>

<div id="atv">
  <label>
    <div class="atv-color" style="background:#ff0010;">
      <input type="radio" name="atv-color" value="#ff0010">
    </div>
  </label>
  <label>
    <div class="atv-color" style="background:#333333;">
      <input type="radio" name="atv-color" value="#333333">
    </div>
  </label>
  <label>
    <div class="atv-color" style="background:#4dadc9;">
      <input type="radio" name="atv-color" value="#4dadc9">
    </div>
  </label>
</div>

最佳答案

问题1：尝试在事件处理程序之外声明sde。

问题2：要收听对动态添加的元素的单击，请使用$(document).on('click')结构。

见https://jsfiddle.net/wwjv4m74/24/