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'));
});
Related
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`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...
}
I have the following:
<ul class="head clearfix">\
<li class=""><strong>Katalog firm <span>(3516)</span></strong></li>
<li class="">Katalog produktów <span>(23752)</span></li>
<li class="">Katalog uslug <span>(81)</span></li>
<li class="last">Katalog szkolen <span>(529)</span></li>
</ul>
I need to execute a mouseover effect only on links that do NOT have <strong> tag as parent. So in the example above I would skip "Katalog firm" link since that one has a tag as parent.
thanks
your css selector would be
ul.header > li > a.menuTabs:hover
to define the hover effect
if you need some jquery functionallity, you can use
$('ul.header > li > a.menuTabs')
to get those elements
Just filter out the elements that has a parent with the strong tag from the selector and attach the mouse events :
$('ul.head li a').filter(function() {
return !$(this).parent().is('strong');
}).on('mouseenter', function() {
$(this).css('color','green');
});
FIDDLE
This could be defined in CSS only by using the direct child selector >
ul.head > li > a.menuTabs:hover
{
/* hover style */
}
You can use the same selector in jquery
$('ul.head > li > a.menuTabs')
$('.head').on('click', 'li > a', function(evt) {
//do something
});
I'd suggest, as an alternative to using a more specific selector (probably the better option in most cases) checking the parent element in the mouseover event:
$('a').on('mouseover', function(e){
var that = this;
if ($(that).parent().is('strong')) {
return false;
}
else {
// do stuff.
}
});
$('.head > li > .menuTabs').mouseover(fucnction () {
// code here
});
Please use like this.
ul li>a:hover
{
background-color:black;
}
<li> Calculate</li>
<li> Calculate1</li>
<li> Calculate2</li>
this is the code I have, when I click on the link the page scrolls down to where #calculate is,which is understandable. But I need it to not scroll
I can remove the value of the href,is there anyway to block it from scrolling WITHOUT removing the value #calculate and without changing the id names?
Live Demo
In modern jQuery versions:
$('a').on('click', function(e) {
e.preventDefault();
});
Other jQuery versions:
$('a').click(function() {
return false;
});
$('li > a[href*=calculate]').on('click', function(e) {
e.preventDefault(); // this will prevent the page scroll
// continue other code
});
Read about .preventDefault()
Here, 'li > a[href*=calculate]' will select those anchor tags which are direct(first level) children of li and contains calculate word in their href attribute.
You can bind a function to the click event and have it return false.
$("a").click(function() { return false; });
DEMO
Just prevent the default action of the link
$('li > a[href^=#calculate]').on('click', function(e){
e.preventDefault();
return false;
});
'li > a[href^=#calculate]' selects an a element whose href attribute begins with #calculate that is a child of an li element
More Info
My code (the html page):
<nav>
<ul>
<li id="homeLink">Home</li>
<li id="rekenLink">Rekenmachine</li>
<li id="bakkerLink">Parkeergarage</li>
<li id="garageLink">Bij de bakker</li>
<ul>
</nav>
The javascript/jquery behind it:
$(function () {
$("ul").click(function () {
// here I want to get the clicked id of the li (e.g. bakkerLink)
});
});
How do I do that?
Use the .on() method with signature $(common_parent).on(event_name, filter_selector, event_listener).
Demo: http://jsfiddle.net/gLhbA/
$(function() {
$("ul").on("click", "li", function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Another method is to bind the event to li instead of ul:
$(function() {
$("li").click(function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Use jQuery on() instead of click and pass li as selector.
$(function() {
$("ul").on('click', 'li', function() {
//Here this will point to the li element being clicked
alert(this.id);
});
});
on() reference - http://api.jquery.com/on/
$(function() {
$("li").click(function() {
alert(this.id);
});
});
edit: jsfiddle link
Handle the click event of the <li> instead of the <ul>.
You can then get this.id.
Use the event's target (The anchor that was clicked) and then grab its parent's id:
$(function() {
$("ul").click(function(e) {
alert(e.target.parentNode.id);
});
});
JSFiddle
here is one of the way to do. Make sure your using the latest jquery file.
$("ul li").on('click', function() {
console.log($(this).attr("id"));
});
You may try
$(function () {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});
or
$(document).ready( function() {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});