CODEWITHSUNDEEP
javascriptjqueryhtml
Horai Nuri
Horai Nuri

Reputation: 5578

How to correctly target a clicked div?

I'm creating a custom colour picker, whenever a user clicks on a color he should be able to edit it choosing a colour in the palette below. There is two issue :

  1. Whenever a user clicks on a colour and changes it, other divs who already have been modified or clicked will not keep their own colours.

  2. Whenever a user adds a new colour with the button, it becomes not editable.

I'm having some trouble understanding why and how I could fix that ?

here's the 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>

Upvotes: 0

Views: 41

Answers (1)

Maarten van Tjonger
Maarten van Tjonger

Reputation: 1927

Problem 1: Try declaring sde outside of your event handler.

Problem 2: To listen for clicks on dynamically added elements, use the $(document).on('click') structure.

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

Upvotes: 1

Related Questions