How can I create an input object for my clicks?

Question

When I click on the color, an object is created.

$(document).off("click", ".color").on("click", ".color", function (event) {
  var result = {};
  $.each($('.color input').serializeArray(), function() {
      result[this.name] = this.value;
  });
  console.log(result);
});

.color{height:100px;width:200px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color" style="background-color:pink">
<input type="hidden" name="name" value="fred">
<input type="hidden" name="id" value="23">
</div>

<div class="color" style="background-color:blue">
<input type="hidden" name="name" value="laura">
<input type="hidden" name="id" value="14">
</div>

Run code

But I want to ensure that the clicked color object is created.

$(document).off("click", ".color").on("click", ".color", function (event) {
  var result = {};
  var this = $(this);
  $.each($(this 'input').serializeArray(), function() {
      result[this.name] = this.value;
  });
  console.log(result);
});

.color{height:100px;width:200px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color" style="background-color:pink">
<input type="hidden" name="name" value="fred">
<input type="hidden" name="id" value="23">
</div>

<div class="color" style="background-color:blue">
<input type="hidden" name="name" value="laura">
<input type="hidden" name="id" value="14">
</div>

Run code

Answer 1

Follow these steps: -

$.each($(this).find('input').serializeArray(), function() {

Working fragment: -

$(document).off("click", ".color").on("click", ".color", function (event) {
  var result = {};
  $.each($(this).find('input').serializeArray(), function() {
    result[this.name] = this.value;
  });
  console.log(result);
});

.color{
  height:100px;
  width:200px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color" style="background-color:pink">
  <input type="hidden" name="name" value="fred">
  <input type="hidden" name="id" value="23">
</div>

<div class="color" style="background-color:blue">
  <input type="hidden" name="name" value="laura">
  <input type="hidden" name="id" value="14">
</div>

Run code

Note. - I cannot understand the meaning of the method .off()in your code, so you can just try: -

$(document).on("click", ".color", function (event) {

Make sure this change does not affect the rest of your other code.

Answer 2

You can try the following:

$(".color").click(function (event) {
  var result = {};
  $.each($(this).find('input').serializeArray(), function() {
      result[this.name] = this.value;
  });
  console.log(result);
});

.color{height:100px;width:200px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color" style="background-color:pink">
<input type="hidden" name="name" value="fred">
<input type="hidden" name="id" value="23">
</div>

<div class="color" style="background-color:blue">
<input type="hidden" name="name" value="laura">
<input type="hidden" name="id" value="14">
</div>

Run code