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

Question

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

1. 每当用户单击颜色并更改它时，已修改或单击的其他 div 将不会保留自己的颜色。

2. 每当用户使用按钮添加新颜色时，它就变得不可编辑。

我无法理解为什么以及如何解决这个问题？

这是 fiddle :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>

Answer 1

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

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

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