jQuery onclick not getting proper values - javascript

I am trying to get Image ALT values on click event but it's not working as it should be and displays the same value (Image ALT) on click.
Here is the code:
HTML:
<a href="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_large.gif?v=1420644155" class="product-photo-thumb" title="Map 1">
<img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_compact.gif?v=1420644155" alt="Map 1">
</a>
<a href="//cdn.shopify.com/s/files/1/0720/9527/products/png_large.png?v=1420644163" class="product-photo-thumb" title="Map 2">
<img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/png_compact.png?v=1420644163" alt="Map 2">
</a>
Javascript / jQuery
$(document).ready(function(){
$('.product-photo-thumb').on("click", function (e) {
e.preventDefault();
alert(document.getElementById("imgVariants").alt);
});
});
>> jsFiddle link
Am I missing anything?
P.S.: I know IDs must be unique but I wanted a solution that can work even without unique IDs.

There are two elements with same Id(shouldnt be), remove them and you should use something like e.target
here is an working example.. http://jsfiddle.net/83cyuozz/1/
$(document).ready(function(){
$('.product-photo-thumb').on("click", function (e) {
e.preventDefault();
alert(e.target.alt);
});
});

try this code
$(document).ready(function(){
$('.product-photo-thumb').on("click", function (e) {
e.preventDefault();
alert($(this).find('img').attr('alt'));
});
});
DEMO
NOTE ID must be unique.

Here is the working example where there can be multiple elements with same ID, and yet it will work fine: JSFIDDLE
$(document).ready(function(){
$("body").on("click",".product-photo-thumb", function (e) {
e.preventDefault();
alert($(this).children("img").attr("alt"));
});
});

Related

JQuery anchor click function

I am trying a way to click a anchor tag using Jquery which is inside multiple div.
Below is my code:
<div class="mainDiv">
<div id="secondDiv" class="check">
<div class="iteratorDiv1" id="id1">
link text
</div>
<div class="iteratorDiv2" id="id2">
link text
</div>
<div class="iteratorDiv3" id="id3">
link text
</div>
<div class="iteratorDiv4" id="id4">
link text
</div>
</div>
</div>
Now if i do something like this
$(".iteratorDiv1 a").live('click',function(e)
{
alert("hey working");
});
But using this approach i will have to write this function for iteratorDiv2,iteratorDiv3 and iteratorDiv4 also.
Is there any way i can identify the anchor click from the mainDiv something like below. This did not work though.
$(".mainDiv a").live('click',function(e)
{
alert("hey working");
});
I am just trying to prevent repeatative coding. Any guidance.
Please check the following jsFiddle:
http://jsfiddle.net/amoolya93/1xL9od85/3/
Your code works fine until Jquery version 1.8.3 .For later versions, please use the following:
$('.mainDiv a').on('click',function(e)
{ alert("hey working");
});
I just did some test here, and seem to work.
You might tell jQuery where exactly your "a" is, so you can try something like this:
$(".mainDiv div > a").on("click", function () {
alert("Hey it's working");
});
or
$(".mainDiv a").on("click", function () {
alert("Hey it's working");
});
$("a").on('click',function(e)
{
var parent = $(this).parent();
alert(parent.attr(class)) ;
});
Use .parent() method to get parent of any link you clicked.

How to bind click event to element hasn't specific child using jquery?

I have several elements on a page like bottom code.
<div>
click
some content
</div>
They can be clicked and jQuery picks that click. However one of the elements has a a link that is clicked should not be picked as a click of the parent element.
$('div:not(#notme)').on('click', function(e) {
// do something
});
Doesn't seem to work for some reason...
Use :has selector to selecting div element has specific child. In :has use :not.
$("div:has(a:not(#notme))").on("click", function(e) {
console.log("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click
some content
</div>
<div>
<a href="#" >click2</a>
some content 2
</div>
You may try:
$('div').on('click', function(e) {
if($(e.target).attr("id") !== "notme") {
// do something
}
});
$('#notme').on('click', function(e) {
e.stopPropagation();
});

Gif wont animate on hover

I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});

$('form:not(.some-class)').keydown is still applying keydown event to .some-class

JQuery's ':not' selector is not preventing the intended-to-be-excluded class (which decorates an element) from firing the .keydown event. Why?
From the following code, when I press a key in the .newOwnerEntryInput field, I expect to see the alert for '1' only. But I see both alerts '1' and '2'.
Javascript:
$('.newOwnerEntryInput').keydown(function (event) {
alert('1');
});
// Prevent Enter from submitting form.
$('form:not(.newOwnerEntryInput)').keydown(function (event) {
alert('2');
});
HTML:
<li style="position: relative">
#Html.DropDownList("cftMemberID", null, String.Empty, new { #class = "actionOwnerDropDown hidden" })
<div class="newOwnerEntryDiv">
<input class="newOwnerEntryInput" />
<div class="float-right closeNewOwner">
<img src="~/Images/cancel_x.png" alt="close" />
</div>
</div>
</li>
I have tried a variety of quotes styles, with and without surrounding the excluded class with quotes, as well as adding 'input' after the class, as in $('form:not(.newOwnerEntryInput input)').keydown
Thanks!
Thanks for those who helped. I do need the form to fire for ALL types of input fields, not just those of type input. So that was out.
Here is what solved my problem:
$('form').keydown(function (event) {
if (! event.which.hasClass('.newOwnerEntryInput')) {
alert('2');
}
});
In this case, for my input of class .newOwnerEntryInput, if a key is pressed, it will NOT fire the event and push '2' out to the alert screen.
Again, thanks, it took a couple responses, all of which had a piece of the solution, for me to answer this myself. :)
Try this:
HTML:
<div>
<input class="newOwnerEntryInput" type="text"/><br />
<!-- I know you have MVC dropdown list, but I replaced it with a html textbox (for simple testing) -->
<input class="newOwnerEntryInput1" type="text"/>
</div>
JavaScript:
$('input.newOwnerEntryInput').keydown(function (e) {
alert('1');
});
$('input:not(.newOwnerEntryInput)').keydown(function (e) {
alert('2');
});
I checked with the documentation that in their example, I saw they had the element input followed by the function with the selector.
The documentation is available is here: jQuery :not()
I hope this helps!
Cheers!
Try this :
$('form input:not(.newOwnerEntryInput)').on('keydown',function (event)
{
alert('2');
});
http://jsfiddle.net/rzseLj27/

Change jquery code from targeting a value to link

Hi i got this html code with a drop down list where i select the option blue or green, and it works great with the jquery below.
<select id="styleSelect">
<option value="styleblue">Blue</option>
<option value="stylegreen">Green</option>
</select>
jquery
$("#styleSelect").change(function() {
updateStyleSheet($(this).val());
});
My question is how to change this code into a clickable link instead of an option value, i already now the html code should be like this
<div id="styleSelect">
click here
click here
</div>
But how should the jquery look like?
$("#styleSelect a").click(function(e) {
e.preventDefault();
updateStyleSheet($(this).attr('href'));
});
You can do:
$("#styleSelect a").click(function(e) {
e.preventDefault(); //stop link
var href = this.href;
});
$("#styleSelect a").click(function(e) {
e.preventDefault();
updateStyleSheet($(this).attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="styleSelect">
click here
click here
</div>

Categories