Here's the JS I've tried:
$('#footer').find('.browse li').click(function(e){
$(this).find('a').click();
});
Here's the HTML in question:
<div id="footer" class="span-24"><div class="footer-box"><div class="footer-holder">
<div class="browse">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div></div></div>
How can I make the <a> click if the <li> is clicked?
PS. This is due to a css design (the LI has a bunch of padding and a background that can't be put on the A)
Your call to .click() just triggers anything bound to the a's click event. I think what you want is something like this:
$('#footer').find('.browse li').click(function(){
window.location = $(this).find('a').attr('href');
}
Are you just missing a click event for the a? Example:
$('.browse li').click(function(e){
$(this).find('a').click();
});
$('a').click(function(){
alert("a clicked");
return false;
});
see this fiddle: http://jsfiddle.net/LRMqD/3/
On the other hand, if you are just trying to redirect to the href try this code:
$('.browse li').click(function(e){
window.location.href = $(this).find('a').attr('href');
});
Please do not attach an event handler to every single element.
Use delegate instead:
$('#footer').find('.browse li').delegate('a', 'click', function(e){
var elt = e.target;
console.log('clicked a number '+elt.id);
});
to make <a> click, you need to do a trigger.
http://api.jquery.com/trigger/
$('#footer').find('.browse li').click(function(e){
$(this).find('a').trigger('click');
});
Related
can anyone please help?
I have a HTML code like this.
<ul class="nav navbar-nav navbar-left">
<li>
<img src="img/topbararrowback.png" alt="">
</li>
<li id="hide_filter">
Hide Filter
</li>
</ul>
I try to add a .click event on li having id hide_filter.
What I have done is-
$("#hide_filter").click(function()
{
alert('message');
});
And -
$(".navbar-left li").click(function() {
alert(this.id); // id of clicked li by directly accessing DOMElement property
alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
});
And -
$('ul.selectedItems li#hide_filter').click(function()
{
//$("p").hide();
alert('message');
});
And -
$('#hide_filter')[0].click(function()
{
//$("p").hide();
alert('message');
});
But nothing works for me.
Thanks in advance for helping..
Actually It works :)
$("#hide_filter").click(function()
{
alert('message');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-left">
<li>
<img src="img/topbararrowback.png" alt="">
</li>
<li id="hide_filter">
Hide Filter
</li>
</ul>
Assuming you have added the jquery library, You need to attach the event when DOM is loaded.i.e. on DOM ready event:
$(function(){//document ready function
$("#hide_filter").click(function(){
alert('message');
});
});
Working Demo
Maybe your code is not eval.
Try put your code in body tag with function wrap like this
$(function(){ //document ready function
$("#hide_filter").on("click",function(){
console.log('message');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Remove .selectedItems selector from your 3rd option
$('ul li#hide_filter').click(function()
{
//$("p").hide();
alert('message');
});
Remove index 0 from your 4th option
$('#hide_filter').click(function()
{
//$("p").hide();
alert('message');
});
Otherwise your 4 options are correct and will work fine. Kindly make sure you have written these codes inside ready event.
$(document).ready(function(){
$("#hide_filter").click(function()
{
alert('message');
});
});
Maybe there is a problem with jquery libraries. Are they in conflict with other javascripts?
I have been trying to make -just- the first child of: ".accordion-media-types a" to work.
At the moment, every anchor is toggling and grabbing the style of ".accordion-media-types" while they should be a regular looking link, so I just need the first one to work, is it possible somehow?
http://jsfiddle.net/0mpuh2f2/8/
html:
<ul class="accordion-media-types">
<li>
Info
<div class="hidden-content">
<ul>
<li>
link
</li>
</ul>
</div>
</li>
</ul>
js:
$(document).on('click', '.accordion-media-types a', function (e) {
e.preventDefault();
$(this).closest('.accordion-media-types').toggleClass('active').find('.hidden- content').slideToggle(500);
});
thanks in advance for any help!
You can use direct child selector: .accordion-media-types > li > a:
$(document).on('click', '.accordion-media-types > li > a', function (e) {
e.preventDefault();
$(this).closest('li').toggleClass('active').find('.hidden-content').slideToggle(500);
});
Read about child selectors here.
Also note that you probably want to toggle only closest li hidden content, not all of them at once.
Demo: http://jsfiddle.net/0mpuh2f2/11/
I want to show the list of tags on an Tumblr blog only when the user clicks on the tags button. For that I use this HTML and jQuery.
HTML
<span class="tags-link">Tags</span>
<ul class="tags">
<li> {Tag} </li>
</ul>
jQuery
$(document).ready(function(){
$(".tags-link").click(function() {
$(".tags").slideDown(700, function(){
//end animation
});
});
});
Every time I click on the .tags-link every .tagsshows up on the page, and I only want the ones of the post where the user has clicked to be shown. I recently started learning jQuery and I'm a little lost here...
You can use .next() http://api.jquery.com/next/
$(this).next(".tags").slideDown(700, function(){
You need to target the tags that is the next adjacent element only:
$(document).ready(function(){
$(".tags-link").click(function() {
$(this).next(".tags").slideDown(700, function(){
//end animation
});
});
});
You can set a data attribute on both the span with class "tags-link" and the ul with class "tags". Then when you click the ".tags-link" element, it will show the ".tags" element with the same data attribute.
For example:
HTML
<span class="tags-link" data-id="1">Tags</span>
<ul class="tags" data-id="1">
<li> {Tag} </li>
</ul>
jQuery
$(document).ready(function(){
$(".tags-link").click(function() {
var id = $(this).attr('data-id');
$(".tags[data-id='" + id + "']").slideDown(700, function(){
//end animation
});
});
});
I have a jQuery code that: onlick on #icon toggles parents class, and onclick on body changes changes the class back if clicked before.
What I need is to have the same thing happen when clicked on #item5 or #item4 like its clicked on #icon.
<div id="header_wrap">
<div id="logo"></div>
<div class="contact" id="ccontainer">
<div id="form"></div>
<div id="icon"><span id="getintouch">GET IN TOUCH</span></div>
</div>
<div id="menu_wrap">
<ul id="menu">
<li id="item1">Home</li>
<li id="item2">About us</li>
<li id="item3">What we do</li>
<li id="item4">Portfolio</li>
<li id="item5">Contact us</li>
</ul>
</div>
</div>
jQuery code....I tried writing my own to add the functionality but I can't seem to get it working.. very little experience with js/jq.
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
$('body').on('click', function(e){
$('#ccontainer')
.removeClass('contactexpand')
.addClass('contact');
});
$('#ccontainer').on('click', function(e){
e.stopPropagation();
});
You have to call event.stopPropagation from the click handler to keep it from "bubbling" up the DOM (i.e., to keep it from activating the click event on all ancestor elements).
$(document).ready(function(){
$('#icon, ul li').on('click', function(event){
event.stopPropagation();
$('#icon').parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
$('body').on('click', function(e){
$('#ccontainer')
.removeClass('contactexpand')
.addClass('contact');
});
});
Change the js to:
$('#icon, #ul > li').on('click', function(e){
$("#ccontainer")
or $(this).parent() *not entirely sure what you wanted to get*
.toggleClass('contact')
.toggleClass('contactexpand');
});
$('body:not(#icon, #ul > li)').on('click', function(e){
$('#ccontainer')
.removeClass('contactexpand')
.addClass('contact');
});
$('#ccontainer').on('click', function(e){
e.stopPropagation();
});
The #ul > li refers to all #item(number)s
I'm not sure if this is actually an event bubbling issue. event.stopPropagation() doesn't solve the problem. The scenario is:
Click element class 'clickMe' (as many clicks as you want)
Then click li element. The click event will be executed based on numbers of click on 'clickMe' class.
Below is the snippet of the code:
html:
<div class="clickMe">Click Me 1</div>
<div class="clickMe">Click Me 2</div>
<div class="clickMe">Click Me 3</div>
<ul id="test">
<li>Test A</li>
<li>Test B</li>
<li>Test C</li>
</ul>
js:
$(function() {
$('.clickMe').live('click', function(e){
//e.stopPropagation()
$('li', $('#test')).live('click',function(e){
//e.stopPropagation()
alert('ouch')
})
})
});
Thanks in advance for any help or explanation about this issue.
You're adding another click handler to the <li> elements whenever a "click" happens on one of the "clikMe" <div> elements. The jQuery code maintains all of those handlers, so after you've clicked "clickMe" a few times, there are several handlers and they'll all be called.
The .live() method is not the best way to delegate event handling. Use .on() if you're using a new version of jQuery, or at least .delegate().
For every click on clickMe you are attaching an event to #test that is your li element
live attaches an event handler for all elements which match the selector, now and in the future.
Separate both and use on
$('.clickMe').on('click', function(e) {
//e.stopPropagation()
})
$('li', $('#test')).on('click', function(e) {
//e.stopPropagation()
alert('ouch');
});
Fiddle:
http://jsfiddle.net/iambriansreed/aEkNa/
jQuery:
$(function() {
var clickme_clicks = 0, clickme_timeout = setTimeout(function(){},0) ;
$('.clickMe').on('click', function(e){
clickme_clicks++;
clearTimeout( clickme_timeout );
clickme_timeout = setTimeout(function(){ clickme_clicks = 0; },1000);
});
$('li a', $('#test')).on('click',function(e){
e.preventDefault();
//if(clickme_clicks == 0) return;
alert('clicks: ' + clickme_clicks );
})
});