I`m new to jQuery and would like to know how I can edit a click function.
Here is what the HTML looks like:
<ul class="result">
<li id="a"></li>
<li></li> //will be added through a loop depending on input
</ul>
So my problem is that when I will click at the li object it will do something. Now I would like to exclude li id="a" from that event. I thought return false; would handle this but it does not.
Here is what the jQuery function looks like:
$('.result li').click(function() {
$('.result li a').click(function (event) {
event.preventDefault();
event.stopPropagation();
});
some further code...
});
I also tried:
$('.result li').click(function() {
$('.result li a').click(function () {
return false;
});
some further code...
});
Thanks alot.
$('.result li:not(#a)').click(function() {
you can do this
$('.result li').click(function() {
if($(this).attr('id')!="your id")
some further code...
});
Try this:
$('.result li').click(function (e) {
if (e.target === this) {
some further code...
}
});
Here, this means the element in the current scope, which is always the li clicked here.
and e.target means the element actually clicked, which can be li or a.
So, in case the element actually clicked is not the li in the current scope, e.target === this return false and nothing happens (no click event is fired) and vice-versa.
A simple if should work:
$('.result li').click(function(ev) {
if (this.id == "a") {
return;
}
// Do your stuff
});
A negation pseudo-class(:not(X)) will do the job. You can get a better idea on negation pseudo-class Here
Now please try with this one
$('.result li:not(#a)').click(function() {
// Your code here...
}
Related
I want to attach an onclick event to a, but cannot seem to achieve it with this:
$("[class^=field-promote_image_]").each(function() {
var a = $(this).find('.file-upload > a');
a.on('click', function(e){
e.preventDefault();
alert(a.attr('href'));
});
});
nor with this:
$("[class^=field-promote_image_] .file-upload > a").on('click', function(e) {
e.preventDefault();
alert($(this).attr('href'));
});
what am I missing?
Use attribute contains selector.
$('.field-row[class*="field-promote_image_"] .file-upload > a').on('click', , function() {
Warning: This will match all the elements whose class contains field-promote_image_. Ex. anything-field-promote_image_
I assume the class field-promote_image_de is dynamic that is why you are going for the attribute starts with selector, but it won't work because that is not the starting of the attribute value.
A right approach here will be is to add an additional class to that element like
<div class="form-row field-promote_image field-promote_image_de">
...
</div>
then just use the new class
$('.field-promote_image a').click(function(){
//your handler code
})
You can use this:
$(".file-upload > a").on('click', function(e) {
e.preventDefault();
alert($(this).attr('href'));
});
I'm having a bit of trouble with a dropdown menu that triggers fadeOut as soon as the mouse leaves the grandparent div, I've searched this problem to death and have yet to find an elegant solution. Here is my code : link
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function(){
$('ul li ul').fadeOut('400');
});
}
$(document).ready(main);
DEMO: MY FIDDLE
You need to specify what element(s) you are trying to attach the event to. By adding '>' youre forcing to only attach the event to that element's children. Try this:
var main = function() {
$('nav').mouseenter(function() {
$(this).find('ul').fadeIn('400');
});
$('nav>ul>li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
FIDDLE
$(this).find('ul').fadeOut('400');
is correct as $('ul>li>ul').fadeOut('400'); Could not target specific (current) li.
Use following hierarchical flow of TAGS
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
I am attempting to remove the selected LI (who's classname is 'selected') from my UL using the onkeydown event: delete button (46). It doesn't seem to remove the LI at all. What am I doing wrong?
Here is a fiddle:
The code in question:
$("#refdocs_list").on('keyup', function(e) {
alert(e.which)
if (e.which == 46) {
('ul li.selected').remove()
}
});
The refdocs_list doesn't receive the keyup, changing it to body for example would do it
$("body").on('keyup', function(e) {
There is no $ ahead of the line inside the if statement
$('ul li.selected').remove()
I had to attach the press to the document level and fix a couple of missing semicolons to get it to work. Here is the modified javascript:
$('#refdocs_list').on('click', 'li', function(e) {
var $this = $(this);
$this.addClass('selected').siblings().removeClass('selected');
document.getElementById('refdocs').value = $this.text();
});
$(document).on('keyup', function(e) {
console.log(e.which);
if (e.which == 46) {
$('ul li.selected').remove();
}
});
I like to know how to get the id of li when i right click over this li using javascript or jquery.
<ul>
<li id="liid" class="collapsable">
<div class="hitarea collapsable-hitarea">
</div>
<span class="folder">Group1.2</span>
</li>
</ul>
I have the right click function.
$(document).bind("contextmenu", function (e) {
// code to get the id of current li
});
Can any one help me please.
Use .on('contextmenu', 'li')
$(function() {
$('ul').on('contextmenu', 'li', function(e) { //Get li under ul and invoke on contextmenu
e.preventDefault(); //Prevent defaults
alert(this.id); //alert the id
});
});
Demo
This uses event delegation on document and only fires if an li is clicked.
$(document)
.on('contextmenu', 'li', function(e) {
e.preventDefault();
console.log(this.id);
});
Compared to adding a handler on $('ul') or $('li'), this will only bind a single handler.
You can try this
$(function() {
$('li').on("contextmenu", function (e) {
alert(this.id);
e.preventDefault();
});
}
Demo
You can use this..
If you want open also Context Menu on right click then use below code:
$(function() {
$('ul li').on('contextmenu', function() {
alert(this.id);
});
});
and without Context Menu then use below code:
$(function() {
$('ul li').on('contextmenu', function(e) {
e.preventDefault();
alert(this.id);
});
});
Happy New year...
I've got a very basic jQuery tab setup. Everything worked fine, but I needed a hash in the URL to dictate the active tab, so I added a condition to check for the hash. Now when the page loads, it's actually activating the anchor and shifting the page down. Why isn't the "return false;" working?
$(document).ready( function() {
$(".tabs a").click(function() {
$(".tabs a").removeClass("active");
$(".tabs a").addClass("button secondary");
$(this).attr("class","button active");
var href = $(this).attr("href");
$(href).parent().find("> .active").removeClass("active");
$(href).addClass("active");
return false;
});
if(window.location.hash) {
$(".tabs a[href$='"+window.location.hash+"']").click();
} else {
$(".tabs a:eq(0)").click(); //default to first tab
}
});
**
Here are some updates:
**
If I simply enter the actual hash value instead of pull it from window.location.hash, it works perfectly.
$(".tabs a[href$='#Contact2']").click();
Clicking the different tabs DOES NOT shift the page, only when the page loads and automatically clicks the tab based on the hash value.
If I place a conditional and then automatically click without using a a variable within the jquery selector, it works fine, assuming the location hash does not match the hash I'm clicking (strange, I know...)
if(window.location.hash === "#Contact2") {
$(".tabs a[href$='#Contact4']").triggerHandler("click");
} else {
$(".tabs a:eq(0)").click(); //default to first tab
}
This really doesn't make much sense to me. It seems that the only issue is using the window.location.hash within the jquery selector...
Maybe also this code should make your work:
$(".tabs a").click(function(){
// your code
return false;
});
The other way is:
$(".tabs a").click(function(e) {
e.preventDefault();
// your code
});
Your approach is very recursive. Try to avoid running a collection across a collection.
Here are a few snippets from a jQuery 1.7+ implementation that might do what you need.
... initialization
$(body).on("click", ".tabs a", { }, _selectTab);
... some function
_selectTab : function(event) {
$(".tabs a").removeClass(selected); // clear all matches.
$(event.currentTarget).addClass(selected); // something like that.
}
Try preventDefault() instead. Don't forget the e inside .click(function(e).
$(document).ready( function() {
$(".tabs a").each(function() {
$(this).click(function(e) {
e.preventDefault();
$(".tabs a").removeClass("button secondary active");
$(".tabs a").addClass("button secondary");
$(this).attr("class","button active");
var href = $(this).attr("href");
$(href).parent().find("> .active").removeClass("active");
$(href).addClass("active");
});
});
if(window.location.hash) {
$(".tabs a[href$='"+window.location.hash+"']").click();
} else {
$(".tabs a:eq(0)").click(); //default to first tab
}
});
And then chaining some things together...
$(document).ready( function() {
$(".tabs a").each(function() {
$(this).click(function(e) {
e.preventDefault();
$(".tabs a").removeClass("button secondary active").addClass("button secondary");
$(this).attr("class","button active");
var href = $(this).attr("href");
$(href).parent().find("> .active").removeClass("active")
$(href).addClass("active");
});
});
if(window.location.hash) {
$(".tabs a[href$='"+window.location.hash+"']").click();
} else {
$(".tabs a:eq(0)").click(); //default to first tab
}
});
I'm not sure what you're doing here...
$(".tabs a").removeClass("button secondary active")
$(".tabs a").addClass("button secondary");
The second line instantly adds two classes you removed with the first line.
Instead of .click() use .triggerHandler("click")
Also, your click handler needs an e event parameter and you need to call e.preventDefault() instead of the old-school return false.
Lastly, instead of if(window.location.hash) use if(window.location.hash.length > 0)
Pure Javascript Solution to stop all hash default click
var a_tag = document.getElementsByTagName('a');
for (var i = 0; i < a_tag.length; i++) {
a_tag[i].addEventListener('click', function (e) {
var lastChar = this.href.substr(this.href.length - 1);
if (lastChar == "#") {
e.preventDefault();
}
}, false);
}