I have a three a tags on a page. User can "select" only one.
Markup:
<div class="fl_near">
<span class="title">title</span>
<p>
<a id="filter_today" class="first_tb" style="display: block">
<span>text1</span>
</a>
<a id="filter_tomorrow">
<span>text2</span>
</a>
<a id="filter_afterTomorrow" class="last_tb selected" style="display: block">
<span>text3</span>
</a>
</p>
</div>
JS code:
$('.fl_near').find('a:not(.selected)').click(function () {
alert('1');
$('.fl_near').find('a').removeClass('selected');
$(this).addClass('selected');
});
This code not works properly. If I select first or second tag then all OK - style is switched, but alert shows anyway. If I select first then I can't select the last.
Where is a problem and why?
Thanks.
DEMO
Because you don't bind click handler to the last element.
Try
$('.fl_near a').click(function () {
$(this).addClass('selected').siblings().removeClass('selected');
});
The find filter runs only once - it is not listening for successive clicks. Use event delegation for this - that way the filter will be applied when the click occurs, not, as currently, when you bind the event.
$('.fl_near').on('click', 'a:not(.selected)', function (evt) {
alert(1);
$(this).addClass('selected').siblings('a').removeClass('selected');
});
Note also I've simplified your add/remove-class line.
As it is now, you're not binding the click event to the link that is selected from start.
I would change:
$('.fl_near').find('a:not(.selected)').click(function () {
to
$('.fl_near a').click(function () {
Related
Please see this page which has this code:
<div class="pure-control-group query-brand-by-column">
<!-- somethings else -->
<div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
X
</div>
</div>
Clicking the X link should remove its ancestor div.query-brand-by-column as a whole but somehow it's not working. I've checked jQuery docs and this answer and the code seems absolutely all right to me but it simply doesn't work. Any idea?
this in href doesn't refers to anchor element, thus it doesn't work. It refers to window.
You should bind element event handler using jQuery.
Script
$(document).on('click', '.pure-button danger' function(e) {
e.preventDefault();
$(this).closest('.query-brand-by-column').remove();
});
HTML
<div class="pure-control-group query-brand-by-column">
<!-- somethings else -->
<div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
X
</div>
</div>
I will not recommended, However you can use inline onclick handler.
<a onclick="$(this).closest('.query-brand-by-column').remove();" href='#' class="pure-button danger">X</a>
Here is your answer, Enjoy
X
Detach your javascript from your html and remove your item with a click event, right now you aren't triggering any click events:
<script>
$(function(){
$('.pure-form').on('click','.query-brand-by-column a',function(){//this will create and delegate your click event to work on dynamically created items
$(this).closest('.query-brand-by-column').remove();
});
});
</script>
seems a little trivial but am having a hard time solving it, i have a jquery function to select the class of a tag on click but the problem is that it selects every other tag underneath the tag clicked as well in structural order where as i only want the very first one
for example if i have
<div class="1">
<div class="2">
<div class="3">
<p class="4">Hello World</p>
</div>
</div>
</div>
and i clicked on the (p) tag that says hello world i would get an alert
saying 4 then 3 then 2 then 1
but like i said i only want the first one witch in this case is 4
here is my jquery code
$("*").dblclick(function(){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
alert($(this).attr('class'));
}
});
i know the problem is happening because technically i am clicking all of the tags so it continus to loop trough but i still need a way to break it after the first class is selected or better yet is there a way to select only the topmost object
Just add return to the function like so:
$("*").dblclick(function(){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
alert($(this).attr('class'));
return false;
}
});
I would pass in event to your click function, and after you've finished your logic, use event.stopPropagation(). This prevents the event from bubbling up to parent elements
$("*").dblclick(function(event){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
alert($(this).attr('class'));
}
event.stopPropagation();
});
Run this example and look your console.
$("body > div").dblclick(function(){
console.log($(this).attr('class'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="1">
<div class="2">
<div class="3">
<p class="4">Hello World</p>
</div>
</div>
</div>
You should read about event bubbling and event propagation.
Here is function which does what you want:
$("*").dblclick(function(e){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
alert($(this).attr('class'));
e.stopPropagation();
}
});
And here is working example:
https://jsfiddle.net/18sawk57/
Although it's not a good solution to attach event listening to all of the tags on the page. Much better solution is to add for example id or clickable class attribute for elements that should have event listening.
Here is another working example with better approach: https://jsfiddle.net/tr7aqask/
Here is another working example with bubbling disabled using jquery: https://jsfiddle.net/yc0481sm/
I have some collapsed/collapsible blocks whereby the first block is open and second/third closed. They work the way I want in terms of opening and closing, but I can't get my head around how to alter the function so that the plus and minus icons change for the correct block. At the moment all change at the same time no matter which block I open or close.
How I can alter the function so that the toggled block updates the correct icon?
function toggleDiv(divId) {
$("#"+divId).toggle();
$('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}
HTML
<p><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Features</span></p>
<div id="features">
Features
</div>
<p><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Specifications</span></p>
<div id="specifications">
Spec
</div>
<p><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">FAQ</span></p>
<div id="faq">
FAQ
</div>
Let me start off by saying no... just no!
Add the target in your markup as a data attribute:
<div class="product-toggle" data-target="features">
<p>
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="toggle-title">Features</span>
</p>
</div>
<div id="features">
Features
</div>
Attach a listener to the product-toggle class like so:
$(document).on('click', '.product-toggle', function() {
var target = this.dataset.target;
$('#'+target).toggle();
$(this).find('span.icon').toggleClass('icon-plus icon-minus');
});
JsFiddle
Note : Inline events are discouraged; you should use jQuery click handlers as you're already using jQuery.
For example (Demo):
$('a.product-toggle').click(function(e){
$(this).closest('p').next('div').toggle();
$(this).find('span.icon').toggleClass('icon-plus icon-minus')
})
If you need to use inline event calls,
You need to alter the second line to get the icon for current element
function toggleDiv(divId) {
$("#"+divId).toggle();
$("#"+divId).prev('p').find('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}
because,
$('.product-toggle span.icon')
selects all the <div>s
or pass this with the click event.
<p><a href="javascript:toggleDiv('features',this);"...
and
function toggleDiv(divId,currEl) {
$("#"+divId).toggle();
$(currEl).find('span.icon').toggleClass('icon-plus icon-minus')
}
Here is something I came up with which is a more handy solution and is not using javascript in href.
$('.product-toggle').on('click', function(evt){
// This will be set to the context of the current element
$("#"+this.name).toggle();
$(this).find('.icon').toggleClass('icon-plus icon-minus');
});
This requires that you give the a tags a name instead of calling the function directly. Here is a link to the fiddle: http://jsfiddle.net/ttpfzrgL/
Try this
function toggleDiv(divId) {
var idSelector = "#"+divId;
$(idSelector).toggle();
$('p').has('idSelector').closest('span.icon').toggleClass('icon-plus icon-minus');
}
I'm working in gsp view in Grails.
A link in a div triggers a Jquery event onclick.
The problem is when a new div is generated dynamically , only the link in the new form triggers this event. Whereas the old one is not functioning anymore.
Can anyone help me out with this?
Here is the div that is duplicated and cause the problem in view.gsp
<div id="supplementaryInfo">
<div id="deleteSupplementary" class="deleteSupplementary" >
<a href="#" id="deleteSupp">
<r:img class="icon float-right" uri="/img/app-icon-delete.gif" title="delete"/></a>
</div>
<g:render template="showConfirm" model="[id: id ]"/>
</div>
here is the jquery function for event !
function showConfirmationPanelForSuppDelete(){
$('#deleteSupp').on('click', function(event) {
event.preventDefault();
$("#showConfirmation).show();
});
cancelSuppDelete();
}
If you are cloning the div than I assume that there are duplicate ids, therefore you can use jquery's closest() function:
<div id="cloneMe" class="yourclass">
<input type="text" id="someId" value="" name="somename">
<i id="icodnId" class="icon-remove btn"></i>
</div>
tha you can use:
$(document).on('click','#icodnId',function(evt){
$(this).closest('.yourclass').dowhateveryouwant();
evt.preventDefault();
});
I can't seem to get my jQuery right to remove a div when I delete something
Code is:
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
I have tried using
$(this).closest('div').remove();
unfortunately this does not work.
Basically there is a list of several divs and I just want them to disappear when clicked.
If your container divs are dynamically added, you need to use event delegation. Try this:
$("#container").on("click", ".amend_order .deleter", function () {
$(this).closest("div").remove();
});
DEMO: http://jsfiddle.net/m6jVP/
If they're added dynamically, then the event binding won't actually find any elements and therefore won't execute when they're clicked. This event handling runs for any elements inside of #container that match the selector .amend_order .deleter when they are clicked.
You can replace #container with a selector that matches a stable (static) element containing these divs you're targeting, using document if necessary.
HTML
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
JS
$('.deleter').on('click', function(){
$(this).closest('div').remove();
})
Live sample http://jsfiddle.net/Ny346/
Try pointing to the div:
$('div.amend_order').click(function(){
$(this).remove();
});
or when clicking on the delete button:
$('a.deleter.ui-link').click(function(){
$(this).parent('div').remove();
});
Try this:
$('.deleter').on('click', function(){
$(this).parent().parent().remove;
})
Live Sample