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?
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 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>
I am building a FAQ, behind every question there is a '+' icon, after clicking on it the answer appears and the icon changes to a '-' icon. The problem is that when you click on the next question the icon of the previous question doesn't toggle back to the original/previous/other icon.
See example:
https://codepen.io/pixelarchitect/pen/eXLEJV
HTML
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
Javascript
$('.faq span').hide();
$('.faq div.question').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('span');
$(".faq span").not($this).hide();
$this.toggle();
$(this).find('svg').toggleClass('fa-plus fa-minus')
});
I'm using jQuery and the free version of FontAwesome for this example.
Using a quite similar logic as your show/hide, you can restore all svg back to plus signs, except the clicked one... See below.
$('.faq span').hide();
$('.faq div.question').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('span');
$(".faq span").not($this).hide();
$this.toggle();
// This line turns all fa-minus into fa-plus except the clicked one
$('.faq svg').not($(this).find('svg')).removeClass('fa-minus').addClass('fa-plus');
$(this).find('svg').toggleClass('fa-plus fa-minus');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
You can find all the font-awesome svgs and use .addClass("fa-plus").removeClass("fa-minus") - excluding the current div's parent:
$('.faq span').hide();
$('.faq div.question').click(function(e) {
e.preventDefault();
var div = $(this).parent();
var $this = div.find('span');
$(".faq span").not($this).hide();
$(".faq").not(div).find("svg")
.addClass("fa-plus")
.removeClass("fa-minus");
$this.toggle();
$(this).find('svg').toggleClass('fa-plus fa-minus')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
Updated codepen: https://codepen.io/anon/pen/EMevMz
<div class="portfolio-item">
<div class="hover-bg">
<a href="#">
<div class="hover-text">
<h4>Logo Design</h4>
<small>Branding</small>
<div class="clearfix"></div>
<i class="fa fa-plus"></i>
</div>
<img src="01.jpg" class="img-responsive ng-isolate-scope">
</a>
</div>
</div>
</div>
I am trying to detect clicks on an <img/> element. I have the following listener:
$('img').addEventListener 'click', ((event) ->
console.log event
), false
...but the event does not fire. How can I detect the click event?
I'd suggest you use .on("click") instead of .click().
$('img').on("click", function() {
console.log("image clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfolio-item">
<div class="hover-bg">
<a href="#">
<div class="hover-text">
<h4>Logo Design</h4>
<small>Branding</small>
<div class="clearfix"></div>
<i class="fa fa-plus"></i>
</div>
<img src="01.jpg" class="img-responsive ng-isolate-scope">
</a>
</div>
</div>
You can use jQuery click event as follows:
$(document).ready(function(){
$("img").click(function(){
alert("The image was clicked.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="portfolio-item">
<div class="hover-bg">
<a href="#">
<div class="hover-text">
<h4>Logo Design</h4>
<small>Branding</small>
<div class="clearfix"></div>
<i class="fa fa-plus"></i>
</div>
<img src="http://placehold.it/140x100" class="img-responsive ng-isolate-scope">
</a>
</div>
</div>
</div>
I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.
live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")
I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/