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>
Related
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>
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
I have a store website in which while clicking the eye icon or expand icon in some images, the quick box shows up with some description.
<div class="ImageWrapper">
<div class="product-button">
<a href="javascript:void(0)" id="promise-solitaire-ring-mount" class="quick-view-text">
<i class="zmdi zmdi-eye"></i>
</a>
<a href="products\promise-solitaire-ring-mount.html">
<i class="zmdi zmdi-link"></i>
</a>
<div class="add-to-wishlist">
<div class="show">
<div class="default-wishbutton-promise-solitaire-ring-mount loading">
<a class="add-in-wishlist-js btn" href="promise-solitaire-ring-mount">
<i class="fa fa-heart-o"></i>
<span class="tooltip-label">
Add to wishlist
</span>
</a>
</div>
<div class="loadding-wishbutton-promise-solitaire-ring-mount loading btn" style="display: none; pointer-events: none">
<a class="add_to_wishlist" href="promise-solitaire-ring-mount">
<i class="fa fa-circle-o-notch fa-spin"></i>
</a>
</div>
<div class="added-wishbutton-promise-solitaire-ring-mount loading" style="display: none;">
<a class="added-wishlist btn add_to_wishlist" href="pages\wishlist.html">
<i class="fa fa-heart"></i>
<span class="tooltip-label">
View Wishlist
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-detail">
<div class="product_left">
<a href="collections\new-arrivals\products\promise-solitaire-ring-mount.html" class="grid-link__title">
Let Promise Solitaire Ring Mount
</a>
<div class="grid-link__meta">
<div class="product_price">
<div class="grid-link__org_price">
<span class="money">$590.00</span>
</div>
</div>
<span class="shopify-product-reviews-badge" data-id="10109315278"></span>
</div>
The complete files are here.
When I click the icon, the popup is not shown, instead, a light-black shade is shown:
What could be the problem?
I am trying to load my dynamic categories with owl carousel but it shows items closed.
Screenshots
first category **Notebook** is opened and others are closed
second category **PC** is opened and others are closed
I need all of them to be open and show items when page loads. it's working fine if i use html version but when i add my dynamic codes it broke as you see in images above.
Code
<div class="category-module" id="latest_category">
<h3 class="subtitle">{{$kis->title}} - <a class="viewall" href="category.tpl">view all</a></h3>
<div class="category-module-content">
<!-- tabs -->
<ul id="sub-cat" class="tabs">
#foreach($kis->childs->take(6) as $child)
<li>{{$child->title}}</li>
#endforeach
</ul>
<!-- items -->
#foreach($kis->childs->take(6) as $child)
<div id="tab-cat{{$child->id}}" class="tab_content">
<div class="owl-carousel latest_category_tabs">
#foreach($child->products->take(10) as $ki)
<div class="product-thumb">
<div class="image"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>{{$ki->title}}</h4>
<p class="price"> <span class="price-new">{{number_format($ki->price,0)}}</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
</div>
</div>
#endforeach
</div>
</div>
#endforeach
</div>
</div>
Can anyone help me to find the issue?
PS: in case you wonder why my PHP codes are the way you see in my code
I am using laravel blade templates.
Update
here i share my full html version of code above maybe you can find some differences which i couldn't
<div class="category-module" id="latest_category">
<h3 class="subtitle">Electronics - <a class="viewall" href="category.tpl">view all</a></h3>
<div class="category-module-content">
<ul id="sub-cat" class="tabs">
<li>Laptops</li>
<!-- and more -->
</ul>
<div id="tab-cat1" class="tab_content">
<div class="owl-carousel latest_category_tabs">
<div class="product-thumb">
<div class="image"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Aspire Ultrabook Laptop</h4>
<p class="price"> <span class="price-new">$230.00</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
<div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_pro_1-200x200.jpg" alt=" Strategies for Acquiring Your Own Laptop " title=" Strategies for Acquiring Your Own Laptop " class="img-responsive" /></div>
<div class="caption">
<h4> Strategies for Acquiring Your Own Laptop </h4>
<p class="price"> <span class="price-new">$1,400.00</span> <span class="price-old">$1,900.00</span> <span class="saving">-26%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_air_1-200x200.jpg" alt="Laptop Silver black" title="Laptop Silver black" class="img-responsive" /></div>
<div class="caption">
<h4>Laptop Silver black</h4>
<p class="price"> <span class="price-new">$1,142.00</span> <span class="price-old">$1,202.00</span> <span class="saving">-5%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_1-200x200.jpg" alt="Ideapad Yoga 13-59341124 Laptop" title="Ideapad Yoga 13-59341124 Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Ideapad Yoga 13-59341124 Laptop</h4>
<p class="price"> $2.00 </p>
<div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/ipod_shuffle_1-200x200.jpg" alt="Hp Pavilion G6 2314ax Notebok Laptop" title="Hp Pavilion G6 2314ax Notebok Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Hp Pavilion G6 2314ax Notebok Laptop</h4>
<p class="price"> $122.00 </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/ipod_touch_1-200x200.jpg" alt="Samsung Galaxy S4" title="Samsung Galaxy S4" class="img-responsive" /></div>
<div class="caption">
<h4>Samsung Galaxy S4</h4>
<p class="price"> <span class="price-new">$62.00</span> <span class="price-old">$122.00</span> <span class="saving">-50%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- and more -->
</div>
</div>
update 2
this is javascript of my carousels
$("#latest_category .owl-carousel.latest_category_tabs").owlCarousel({
itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
lazyLoad : true,
navigation : true,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
scrollPerPage : true,
pagination: false,
});
$("#latest_category .tab_content").addClass("deactive");
$("#latest_category .tab_content:first").show();
//Default Action
$("#latest_category ul#sub-cat li:first").addClass("active").show(); //Activate first tab
//On Click Event
$("#latest_category ul#sub-cat li").on("click", function() {
$("#latest_category ul#sub-cat li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$("#latest_category .tab_content").hide();
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
If I understand you correctly, the issue is not with the carousel. It is with the tabs script.
So you are better off using a class as the selector.
It looks like you are using something like this https://gist.github.com/hong6/7372763 for your tabs.
Then you are better off removing the #latest_category and using a class. Then in your jquery, you can add a jquery context. Here is un-tested the code:
$(".category-module .owl-carousel.latest_category_tabs").owlCarousel({
itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
lazyLoad : true,
navigation : true,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
scrollPerPage : true,
pagination: false,
});
$(".category-module").each(function() {
$(".tab_content", this).addClass("deactive");
$(".tab_content:first", this).show();
//Default Action
$("ul#sub-cat li:first", this).addClass("active").show(); //Activate first tab
});
//On Click Event
$(".category-module ul#sub-cat li").on("click", function() {
var parent = $(this).parents('.category-module')
$("ul#sub-cat li", parent).removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content", parent).hide();
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab, parent).fadeIn(); //Fade in the active content
return false;
});
Here is a fiddle that shows a similar situation.
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?