Question

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

每当用户点击某个颜色并对其进行更改时，已经修改或点击的其他divs将不会保留自己的颜色。
每当用户使用按钮添加新颜色时，它就变得不可编辑。

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

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

＆＃13;

$('#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,
    });
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

请参阅https://jsfiddle.net/wwjv4m74/24/

如何正确定位点击的div？

1 个答案: