When I click on a 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>
But I want to achieve that the object of the clicked color 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>
Do like below:-
$.each($(this).find('input').serializeArray(), function() {
Working snippet:-
$(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>
Note:- I am unable to see the significance of .off()
method in your code so may be you can just try:-
$(document).on("click", ".color", function (event) {
Make sure that this change will not affect rest of your other code
You may try this :
$(".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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With