Develop Reference

jQuery myClass.click not working but html.click function is working

for the life of me I can't figure this out. I've tried classes, IDs and regular element selectors. Below is a snippet I'm trying to run.
$(document).ready(function () {
$(".myClass").click(function () {
console.log("Hello!");
});
});
The example above will NOT run. However when changing it to the example below it will run.
$(document).ready(function () {
$("html").click(function () {
console.log("Hello!");
});
});
Example HTML below
<div class="mapLegend">
<div class="mapLegend-header">
<h2>Map Key</h2>
<a href="" class="myClass">
<img class="mapLegend-expandCollapse icon-sm" src="/app/img/Forward-Arrow-64.png" />
</a>
</div>
<div class="mapLegend-content">
<div class="mapLegend-value">
<img alt="" src="/app/img/freight-map/last_truck_location.png" />
<span class="label">Last Truck Location</span">
</div>
<div class="mapLegend-value">
<img alt="" src="/app/img/Drop_hollow.png" />
<span class="label">Delivered Load</span>
</div>
<div class="mapLegend-value">
<img alt="" src="/app/img/freight-map/first_pick.png" />
<span class="label">First Pick</span>
</div>
<div class="mapLegend-value">
<div class="dot addPick"></div>
<span class="label">Additional Pick</span>
</div>
<div class="mapLegend-value">
<div class="dot checkCall"></div>
<span class="label">Check Call / Previous Location</span>
</div>
<div class="mapLegend-value">
<div class="dot addDrop"></div>
<span class="label">Additional Drop</span>
</div>
<div class="mapLegend-value">
<img alt="" src="/app/img/freight-map/final_stop.png" />
<span class="label">Final Drop</span>
</div>
</div>
It seems as if anytime I try to tie my function to a class or ID it doesn't want to run. I have also tried the .on("click", function()) method as well with the same results.
Any help would be greatly appreciated! I've never ran into this before.
Thanks!

Your code runs, but cause is <a> element, it refresh all the page and as result you don't see the console.log. If you really want to add click event on <a>, you should add the following line.
$(document).ready(function(){
$(".myClass").click(function(e){
e.preventDefault();
console.log("clicked");
});
});
The variable eand the function preventDefault() is the key here. As you can guess the preventDefault doesn't run the default code for <a> so it will not refresh your page.
I hope to help you a bit

using $(this) properly in jquery

$(".gear_listing").hover(function(){
$(".overlay_gears").show();
},function(){
$(".overlay_gears").hide();
}
);
above is my jquery code,as u can imagine i am trying to show .overlay_gears div when .gear_listing div is hover,the above code works just fine.the problem is i have many number of .gear_listing divs and many number of .overlay_gears div,when i hover on any div called .gear_listing all the .overlay_gears div is shown which i dont want.i just want to show the .overlay_gears div under that .gear_listing div.i know i have to make use of $(this).i just don't know how.
i tried doing this:
$(".gear_listing").hover(function(){
var this=$(this);
this.$(".overlay_gears").show();
},function(){
this.$(".overlay_gears").hide();
}
);
its not working
below is my div structure:
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_one.jpg">
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_two.jpg">
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_three.jpg">
</div>
</a>
</li>

.overlay_gears is children of .gear_listing so use like this
$(".gear_listing").hover(function(){
$(this).children(".overlay_gears").fadeIn();
},function(){
$(this).children(".overlay_gears").fadeOut();
});

Use .find() and .slideToggle() for animation effects or use .fadeToggle()
$(".gear_listing").hover(function() {
$(this).find(".overlay_gears").stop().slideToggle();
});
or
$(".gear_listing").hover(function() {
$(this).find(".overlay_gears").stop().fadeToggle();
});
Fiddle

Use this as the second-argument in selector which is context
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function.
Internally, selector context is implemented with the .find() method, so $( "SELECTOR", this ) is equivalent to $(this).find("SELECTOR")
$(".gear_listing").hover(function() {
$(".overlay_gears", this).show();
}, function() {
$(".overlay_gears", this).hide();
});

Since overlay_gears is a child element of gear_listing,you can use .find() method
$(".gear_listing").hover(function() {
$(this).find(".overlay_gears").show();
}, function() {
$(this).find(".overlay_gears").hide();
});

Basically, you first needs to hide all .overlay_gears on hover and just needs to show the particular .overlay_gears that is the child of current hovered parent. And then in 'unhover' event you can simply hide all .overlay_gears divs..
HTML:
<ul>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"> overlay_gears data1 overlay_gears data1</div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"> overlay_gears data2 overlay_gears data2</div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"> overlay_gears data3 overlay_gears data3 overlay_gears data3</div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
</div>
</a>
</li>
</ul>
JQuery:
$(document).ready(function(){
$( ".gear_listing" ).hover(
function() {
$( ".overlay_gears" ).hide();
$( ".overlay_gears", this ).show();
}, function() {
$( ".overlay_gears" ).hide();
}
);
});
Working Fiddle: http://jsfiddle.net/kfopaj7e/
I have just removed <img> tag for testing purpose and added few css in Fiddle for the visual thingy

you can use
$(".gear_listing").hover(function(){
$(this).children('.overlay_gears').show();
}
here we select all elements inside $(this) with required class
http://www.w3schools.com/jquery/jquery_traversing_descendants.asp

pass an event in function like
function(evt){
var th = $(evt.target);
$(th).find(".overlay_gears").show();
}

How to copy the href link of an anchor to other anchor?

I am showing a set of products via shortcode in WordPress. The display has an image and button.
Problem: Only the photo contains the link to single product page. The associated button does not have the link to the single product page.
This is the current code:
<div class="display-products">
<div class="wpb_wrapper">
<div class="displayProduct-shortcode displayProduct-Container">
<div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
<div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
<div class="dp_images">
<a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
<div class="he-wrap tpl1">
<div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
</div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
</div>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Desired Output: I want to somehow iterate over each .single_add_to_cart_button and copy the link of every product-name to each READ MORE button
This is my current jquery code:
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
j(this).attr('href', getProductLink);
});

Set the href attribute value using the elements context. Use closest() to traverse up to dp-product-information element then find the desired anchor element the read its attribute and set the value.
Use
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});
$(function() {
$('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button">
<a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
</div>
<div style="clear: both;"></div>
</div>

Instead of assigning value for the different buttons with the links I would like to suggest you to use a common class (if you can) then trigger the click event for them:
$('.selector').on('click',function(){
$('.a-selector').trigger('click');
});

how to get the href of a link when i press another href

i want to get the attr href of an above link beside the one i press wich is the last link from productinfo div class. I tryed with closest but it gets me the same link i press and i want the above one. The link i want to store in produs_href is the link from first href under productinfo class. Here is my code:
<div class="col-sm-4 produse"><!--PRODUS-->
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/images/produse/'.$recomand['ID_Produs'].'/'.$recomand['Poza'].'" alt="" />
<h2 style="text-decoration: line-through;">'.$recomand['Pret'].' lei </h2><h2>'.$recomand['Pret_Nou'].' lei </h2>
<p>'.$recomand['Nume_Prod'].' '.$recomand['Gramaj'].' '.$tip.'</p>
<i class="fa fa-shopping-cart"></i>Adaugă în coș
</div>
</div>
</div>
</div>
jquery
<script>
$(".cos").click(function(e){
e.preventDefault();
var href = $(this).attr('href');
var produs_href = $(this).closest('a').attr('href');
$.getJSON(href, function(data) {
$.each(data, function(key, val) {
$("#cnt").empty();
$("#test").append('<li>' + val.nume + '</li>')
$("#cnt").append('' + val.cnt +'')
});
});
$(\'#detalii_prod\').modal('show');
alert(produs_href);
});
</script>

Use prev. This method gets the immediately preceding sibling.
$(this).prev().attr('href');
EDIT
From your comments, the code that would do the trick is
$(this).closest('.productinfo').find('a:first').attr('href');

You can use the .prev
var link = $(this).prev().attr('href');
and now you can use link.

you can use like this
$(this).prev("a").attr("href");
and more help:
Get the href value of a previous HTML anchoer, <a>, using jQuery

$(".cos").click(function(e){
e.preventDefault();
var text = $(this).parent().find('a:first').attr('href');
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 produse">
<!--PRODUS-->
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center"> <img src="img/Penguins.jpg" height="50" width="50" alt="" />
<h2 style="text-decoration: line-through;">Hello there</h2>
<h2>Anto</h2>
<a href="link produs">
<p>Angeline</p>
</a> <i class="fa fa-shopping-cart"></i>Test </div>
</div>
</div>
</div>
try this
$(this).parent().find('a:first').attr('href');

Try with .eq() method.
$(this).parent().find('a').eq(0).attr('href');
Hope this helps you...

JQuery Parent-Child Selection

I am new to jQuery and am trying to write a script that will run through a menu list and display the correct background image based on the menu item. The menu list is going to be randomly populated so a script is necessary to load the correct image.
The problem is that the attribute where I am able to see which item the menu belongs to is not on the list item itself but on a div contained inside the list item. My question is is it possible to select a child element of the already selected element ?
E.g (the menuli a segment)
$(document).ready( function() {
$(menuli).each( function(index) {
$itemnumber = $(menuli a).attr("href");
switch($itemnumber) {
case 1:
$(this).css("background-image", "image01.jpg");
break;
}
});
});
This is more or less the script I am trying to get, where each list item is iterated through and depending on the href of the link inside the list item a background image is set to that list item.
EDIT
Here is my html:
<div id="divMenuSportGSXSports">
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=468&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl00_lnkSport" href="/Sport/Groups.aspx?IDSport=468&Antepost=0">
<span title="SOCCER">SOCCER</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=520&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl01_lnkSport" href="/Sport/Groups.aspx?IDSport=520&Antepost=0">
<span title="BASEBALL">BASEBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=544&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl02_lnkSport" href="/Sport/Groups.aspx?IDSport=544&Antepost=0">
<span title="CRICKET">CRICKET</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=525&Antepost=0&Tema=Supabets)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl03_lnkSport" href="/Sport/Groups.aspx?IDSport=525&Antepost=0">
<span title="BASKETBALL">BASKETBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=534&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl04_lnkSport" href="/Sport/Groups.aspx?IDSport=534&Antepost=0">
<span title="ICE HOCKEY">ICE HOCKEY</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=523&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl05_lnkSport" href="/Sport/Groups.aspx?IDSport=523&Antepost=0">
<span title="TENNIS">TENNIS</span>
</a>
</div>
</div>
</div>

Yes you can, use find
var parentElement = $('#someElement');
var childElement = parentElement.find('.child'); //where .child should be your child selector
Where as example code is not clear, I just gave answer to your question.

try to change this:
$(this).css("background-image", "image01.jpg");
to this:
$(this).children("div").css("background-image", "image01.jpg");
If you want to target the direct child of the element, better to use children() than find()
Please refer to this: What is fastest children() or find() in jQuery?