Replacing multiple HTML elements using Jquery - javascript

In the following example I am trying to update the value of #viewer_campaign3 with new data and move the older values to other HTML elements. But I think what happens is that I end up overwriting the old data.
$('#viewer_campaign1').html($('#viewer_campaign2'));
$('#viewer_campaign2').html($('#viewer_campaign3'));
$('#viewer_campaign3').html("new data");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section clearfix impact">
<div class="col-md-8 col-md-offset-2">
<h2 class="mb-30"><span><i class="fa fa-refresh fa-spin fa-fw"></i></span>Live</h2>
<div class="">
</div>
<div class="stats mt-30 .col-xs-6 .col-sm-3">
<div class="col-md-4">
<i class="fa fa-heart"></i>
<p>Demo1<span id="viewer_donation_amount1"></span><br><a href="" id=viewer_campaign1>Hello Campaign1</a><p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo2<span id="viewer_donation_amount2"></span><br><a href="" id=viewer_campaign2>Hello Campaign2</a><p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo3<span id="viewer_donation_amount3"></span><br><a href="" id=viewer_campaign3>Hello Campaign3</a><p>
</div>
</div>
</div>
</div>
Any help is appreciated


In your .html() on $('#viewer_campaign1') and $('#viewer_campaign2'), you are not actually assigning the .html() value of each of the corresponding elements as intended.
So change this
$('#viewer_campaign1').html($('#viewer_campaign2'));
$('#viewer_campaign2').html($('#viewer_campaign3'));
To this
$('#viewer_campaign1').html($('#viewer_campaign2').html());
$('#viewer_campaign2').html($('#viewer_campaign3').html());
This will assign the values as you're intending. There were minor edits I made in the full code below, but these changes were all you needed to update appropriately.
$('#viewer_campaign1').html($('#viewer_campaign2').html());
$('#viewer_campaign2').html($('#viewer_campaign3').html());
$('#viewer_campaign3').html("new data");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section clearfix impact">
<div class="col-md-8 col-md-offset-2">
<h2 class="mb-30"><span><i class="fa fa-refresh fa-spin fa-fw"></i></span>Live</h2>
<div class="">
</div>
<div class="stats mt-30 .col-xs-6 .col-sm-3">
<div class="col-md-4">
<i class="fa fa-heart"></i>
<p>Demo1<span id="viewer_donation_amount1"></span><br>Hello Campaign1
<p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo2<span id="viewer_donation_amount2"></span><br>Hello Campaign2
<p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo3<span id="viewer_donation_amount3"></span><br>Hello Campaign3
<p>
</div>
</div>
</div>
</div>

Related

Show sum of the dynamic price when click on radio button in jquery

I'm in very bad situation with a project which is related to a travelling website. I'm unable to figure out that how do I calculate the total amount of each passenger's preferred room type.
I've two passenger's records in database.
1) Maggie
2) Esther
The default price for each passenger's is 125000 and when if user click to choose his own room type then price is 150000 for the selected passenger.
Here is the website on which I applying this : Website Tailor Page
It is easy to do when the number of travelers is static but all the
data come from the database. So below in the code I mention the static version of the form.
Here are the complete code, Please help me because I'm unable to figure it out the issue:
$(document).ready(function(){
$('#extraRoomInput_m1').click(function(){
$('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
});
$('#extraRoomInput_f1').click(function(){
$('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
});
var extraRoom1 = $("input[name='extraRoom356a192b7913b04c54574d18c28d46e6395428ab']").val();
var res = parseInt(extraRoom1);
res = res+parseInt(extraRoom1);
$('#extraRoomInput_m2').click(function(){
$('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
});
$('#extraRoomInput_f2').click(function(){
$('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
});
var extraRoom2 = $("input[name='extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0']").val();
var res = parseInt(extraRoom2);
res = res+parseInt(extraRoom2);
// alert(res);
$('#total_price').html(res);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-4" id="p-1">
<h3 class="mb-1">
<i class="fa fa-bed fa-fw"></i>
Maggie's room type
</h3>
<p>Maggie would you like your own room?</p>
<div class="row mb-5">
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_m" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_m1" value="150000">
<p><b>Yes please</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p>
<p>You will have your own room</p>
</div>
</div>
</label>
</div>
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_f" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_f1" value="125000" checked="">
<p><b>No thanks</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
<p>You will share a room with another traveller of the same gender</p>
</div>
</div>
</label>
</div>
</div>
<h3 class="mb-1">
<i class="fa fa-bed fa-fw"></i>
Esther's room type
</h3>
<p>Esther would you like your own room?</p>
<div class="row mb-5">
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_m" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_m2" value="150000">
<p><b>Yes please</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p>
<p>You will have your own room</p>
</div>
</div>
</label>
</div>
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_f" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_f2" value="125000" checked="">
<p><b>No thanks</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
<p>You will share a room with another traveller of the same gender</p>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="card">
<a class="card-link" data-toggle="collapse" href="#tripInformation">
<div class="card-header text-dark fs-20">
Classic Golden Triangle (CGT)
</div>
</a>
<div id="tripInformation" class="collapse show" data-parent="#tripAccordation">
<div class="card-body p-0">
<ul class="list-group border-0">
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-clock-o"></i> Duration</div>
<div class="col-md-8">6 Nights/7 Days</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-pin"></i> Start</div>
<div class="col-md-8">NEW DELHI, DELHI</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-marker"></i> Finish</div>
<div class="col-md-8">NEW DELHI, DELHI</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-users"></i> Passengers</div>
<div class="col-md-8">
<p>
<i class="fa fa-fw fa-male"></i> Maggie Clarke Schwartz
</p>
<p>
<i class="fa fa-fw fa-female"></i> Esther Ball Clayton
</p>
</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-bed"></i> Room type</div>
<div class="col-md-8 text-right">
<span class="font-weight-bold">
<i class="fa fa-inr"></i> Price (per person)
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="passanger-1"><div class="row px-2 mt-2"><div class="col-md-6">Maggie (Own Room) </div><div class="col-md-6 text-right">INR <i class="fa fa-inr pl-1"></i> <span id="priceOwnRoom"> 150000.00</span></div></div></div>
<div id="passanger-2">
<div class="row px-2 mt-2">
<div class="col-md-6">
Esther (Twin Room)
</div>
<div class="col-md-6 text-right">
INR <i class="fa fa-inr pl-1"></i>
<span id="priceTwinRoom">
125000.00 </span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item active border-0 px-2 fs-20">
<div class="row">
<div class="col-md-4 font-weight-bold">
<i class="fa fa-fw fa-inr"></i> Price
</div>
<div class="col-md-8 text-right">
<i class="fa fa-inr"></i>
<span id="total_price">300000</span>
(per person)
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Show sum of dynamic radio input element and It should also show when click on another radio input element

I'm working on a project where I want to show total price accordingly when extra room option selected by the traveler.
It is easy to do when the number of travelers is static but all the
data come from the database. So below in the code I mention the static version of the form.
Here are the complete code, Please help me because I'm unable to figure it out the issue:
$(document).ready(function(){
$('#extraRoomInput_m1').click(function(){
$('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
});
$('#extraRoomInput_f1').click(function(){
$('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
});
var extraRoom1 = $("input[name='extraRoom356a192b7913b04c54574d18c28d46e6395428ab']").val();
var res = parseInt(extraRoom1);
res = res+parseInt(extraRoom1);
$('#extraRoomInput_m2').click(function(){
$('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
});
$('#extraRoomInput_f2').click(function(){
$('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
});
var extraRoom2 = $("input[name='extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0']").val();
var res = parseInt(extraRoom2);
res = res+parseInt(extraRoom2);
// alert(res);
$('#total_price').html(res);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-4" id="p-1">
<h3 class="mb-1">
<i class="fa fa-bed fa-fw"></i>
Maggie's room type
</h3>
<p>Maggie would you like your own room?</p>
<div class="row mb-5">
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_m" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_m1" value="150000">
<p><b>Yes please</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p>
<p>You will have your own room</p>
</div>
</div>
</label>
</div>
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_f" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_f1" value="125000" checked="">
<p><b>No thanks</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
<p>You will share a room with another traveller of the same gender</p>
</div>
</div>
</label>
</div>
</div>
<h3 class="mb-1">
<i class="fa fa-bed fa-fw"></i>
Esther's room type
</h3>
<p>Esther would you like your own room?</p>
<div class="row mb-5">
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_m" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_m2" value="150000">
<p><b>Yes please</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p>
<p>You will have your own room</p>
</div>
</div>
</label>
</div>
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_f" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_f2" value="125000" checked="">
<p><b>No thanks</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
<p>You will share a room with another traveller of the same gender</p>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="card">
<a class="card-link" data-toggle="collapse" href="#tripInformation">
<div class="card-header text-dark fs-20">
Classic Golden Triangle (CGT)
</div>
</a>
<div id="tripInformation" class="collapse show" data-parent="#tripAccordation">
<div class="card-body p-0">
<ul class="list-group border-0">
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-clock-o"></i> Duration</div>
<div class="col-md-8">6 Nights/7 Days</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-pin"></i> Start</div>
<div class="col-md-8">NEW DELHI, DELHI</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-marker"></i> Finish</div>
<div class="col-md-8">NEW DELHI, DELHI</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-users"></i> Passengers</div>
<div class="col-md-8">
<p>
<i class="fa fa-fw fa-male"></i> Maggie Clarke Schwartz
</p>
<p>
<i class="fa fa-fw fa-female"></i> Esther Ball Clayton
</p>
</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-bed"></i> Room type</div>
<div class="col-md-8 text-right">
<span class="font-weight-bold">
<i class="fa fa-inr"></i> Price (per person)
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="passanger-1"><div class="row px-2 mt-2"><div class="col-md-6">Maggie (Own Room) </div><div class="col-md-6 text-right">INR <i class="fa fa-inr pl-1"></i> <span id="priceOwnRoom"> 150000.00</span></div></div></div>
<div id="passanger-2">
<div class="row px-2 mt-2">
<div class="col-md-6">
Esther (Twin Room)
</div>
<div class="col-md-6 text-right">
INR <i class="fa fa-inr pl-1"></i>
<span id="priceTwinRoom">
125000.00 </span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item active border-0 px-2 fs-20">
<div class="row">
<div class="col-md-4 font-weight-bold">
<i class="fa fa-fw fa-inr"></i> Price
</div>
<div class="col-md-8 text-right">
<i class="fa fa-inr"></i>
<span id="total_price">300000</span>
(per person)
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I haven't looked at all the code, but you seem to be setting up event handlers for the buttons. This is an asynchronous action that will fire when the button is pressed. However your total price is not wanting for the event to fire so won't be affected. You need to put the total price calculation in the callback function of the event. This is a common Javascript mistake because the asynchronous nature is tricky to understand. There is lots of material on the web to explain this - make sure you understand the concepts and don't try to cut and paste code
In the second res calculation you are overwriting the res value calculated for extra room1 instead of adding the values together. To make it clearer, call the first res something like extraRoom1Total and the second extraRoom2Total and then add them together. This will make the code easier to understand and therefore easier to debug and maintain

Loop through items in HTML table using jQuery

I have a table.
I want to go through all the goods and get their quality and price.
But i can't figure out how to get these values.
table:
<div class="table-items__container">
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">1</div>
<div class="item_price">30</div>
<div class="table-items_item__controls">
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">2</div>
<div class="item_price">20</div>
<div>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">3</div>
<div class="item_price">10</div>
<div>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
</div>
<div class="Summary">Summary: <span></span></div>
Script:
$('.table-items__item').children().each(function(){
console.log($(this).text());
});
I think that's all needed.
Then I need to calculate the price of all items.
http://jsfiddle.net/mg4wjfbu/

Iterate over the wrapped div and within the callback function get element within current div by specifying context argument or using find() method(within callback this refers to the current element).
$('.table-items__item').each(function() {
console.log($('.item_quality', this).text(), $('.item_price', this).text());
// or
console.log($(this).find('.item_quality').text(), $(this).find('.item_price').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-items__container">
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">1</div>
<div class="item_price">30</div>
<div class="table-items_item__controls">
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">2</div>
<div class="item_price">20</div>
<div>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">3</div>
<div class="item_price">10</div>
<div>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
</div>
<div class="Summary">Summary: <span></span></div>
</div>

Click event fires even when class name removed in jQuery

I have a div object that should be clickable when it contains the class "clickable". In the Click function I remove the "clickable" class, but it still fires when clicking the object. Will it continue to fire even when I remove the class?
HTML:
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
jQuery:
$("div.vote-wrap > div.circle.clickable").click(function () {
let $circle = $(this);
$circle.removeClass("clickable");
}

because you didn't unbind the event in the click callback.
You just remove the class.
$("div.vote-wrap > div.circle.clickable").click(function() {
let $circle = $(this);
$circle.removeClass("clickable");
$(this).unbind('click');//unbind the click event
alert('clicked , and unbind now!');
})
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
and another way:
$("div.vote-wrap").on('click','div.circle.clickable',(function() {
let $circle = $(this);
$circle.removeClass("clickable");
alert('clicked');
}))
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>

Use delegate event on() and unbind the click event with unbind('click') for dynamically created element.
$("div.vote-wrap > div.circle.clickable").on('click',function () {
let $circle = $(this);
$circle.removeClass("clickable");
$circle.unbind('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>

The element event handler is attached to is determined when listener is attached, not when the event is emitted.
you could rewrite that code like this:
// element instance is captured once
var $elem = $("div.vote-wrap > div.circle.clickable")
$elem.click(function () {
let $circle = $(this)
$circle.removeClass("clickable")
})
For solution to your problem check the answers of this question: Event binding on dynamically created elements?

jQuery $.post return incomplete data

I've come across a strange behavior of a $.post command.
I have an AJAX request by $.post(param,returned data), which loads pictures onto the page of the visitor.
This is the code, with a little bit of animation:
function showPicturesByCat(cat){
$('.local-overlay').fadeIn(200);
$('#picturesByCat').stop().animate({height: '0px' },200);
setTimeout(function(){
$.post('./ajax/populate.php',{operation:'show-pictures-on-front',cat:cat})
.done(function(data){
$('#picturesByCat').html(data);
setTimeout(function(){
var inaltime = $('#picturesByCat')[0].scrollHeight+20;
$('#picturesByCat').stop().animate({height: inaltime+'px' },500);
$('#picturesByCat').css({opacity: 1});
$('.local-overlay').delay(500).fadeOut(300);
},300);
$('html, body').delay(200).stop().animate({
scrollTop: $('#picturesByCat').offset().top
},300);
});
},200);
}
On the PHP side, it's just a loading of pictures with names inside a database, based on the chosen category (cat).
Code works perfectly ... on PC,s, but when it turns to mobile, both Chrome and Firefox do the same wierd thing.
When I choose a category, the pictures loads but not completely. If you scroll to the bottom, you'll see the thing. If I tap the second time on the same category, the pictures loads completely.
Here's the address
http://adrianmalancaphotography.com/en/fotografie
I can't figure this out, it's too wierd for me. Maybe some of you can spot or already know what it's wrong.
Edited:
this is the dump data, as requested in comments.
<hr class="hr-white">
Peisaj
<hr class="hr-white">
<div class="col-12">
<div class="card-columns">
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Maci 2</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-22.jpg" class="img-fluid" width="100%" alt="fotografie Maci 2" onClick="showImage(22)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Grau</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-17.jpg" class="img-fluid" width="100%" alt="fotografie Grau" onClick="showImage(17)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Apa incetosata</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-15.jpg" class="img-fluid" width="100%" alt="fotografie Apa incetosata" onClick="showImage(15)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Apus intunecat</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-14.jpg" class="img-fluid" width="100%" alt="fotografie Apus intunecat" onClick="showImage(14)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Nori cenusii</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/preview/AMP-IMG-13.jpg" class="img-fluid" width="100%" alt="fotografie Nori cenusii" onClick="showImage(13)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>La tara</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-12.jpg" class="img-fluid" width="100%" alt="fotografie La tara" onClick="showImage(12)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Ponton</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-10.jpg" class="img-fluid" width="100%" alt="fotografie Ponton" onClick="showImage(10)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Lebede</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-9.jpg" class="img-fluid" width="100%" alt="fotografie Lebede" onClick="showImage(9)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Apus pe apa</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-8.jpg" class="img-fluid" width="100%" alt="fotografie Apus pe apa" onClick="showImage(8)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Camp cu maci</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-4.jpg" class="img-fluid" width="100%" alt="fotografie Camp cu maci" onClick="showImage(4)"> </div>
</div>
</div>
Hope it helps, although I can't see anything wrong.

The problem does not come from $.post. The problem is caused by:
var inaltime = $('#picturesByCat')[0].scrollHeight+20;
$('#picturesByCat').stop().animate({height: inaltime+'px' },500);
REASON:
Since the height is not properly calculated because, when your images start loading, its height is not calculated right, then your #picturesByCat is limited to your wrong calculated value, so it is not fully displayed, but the images are loaded correctly.
The second time you clicked on the category, those images are fully displayed and have right height, then the problem is gone.
RESOLUTION:
Set the height back to auto when your animation is finished:
$('#picturesByCat').stop().animate({height: inaltime+'px' },500, function(){
$('#picturesByCat').css('height', 'auto');
});

Categories

Resources