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>
Related
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.
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();
});
I try to toggle a class by selecting a option in the dropdown menu, i've tried using a alert() to check if it works but i cant seem to get it to work.
HTML:
<html>
<body>
<select id="dropdown">
<option value="1">Steinkjer</option>
<option value="2">Verdal</option>
</select>
</body>
</html>
Javascript:
$('#dropdown option:selected').click(function(){
var getText = $('#dropdown option').text();
alert($('.overlay-'+getText));
});
Please help me solve this issue.
$('#dropdown option:selected') is not a live object. Your code binds the click handler to the selected option on page load. You should either use event delegation or better listen to change event of the select element.
$('#dropdown').on('change', function() {
// Get text content of the selected option
var getText = $('option:selected', this).text();
// Get current value of the select element
// var getValue = this.value;
console.log(getText);
console.log($('.overlay-'+getText));
});
You need to:
Check document.ready is executed
Assign the change event
To bind some events to DOM elements, requires a document.ready, to
ensure the DOM element is sure created at the time you associate the
event.
A page can't be manipulated safely until the document is "ready.": https://learn.jquery.com/using-jquery-core/document-ready/
Check this snippet:
$(document).ready(function() {
$('#dropdown').change(function() {
var getText = $('#dropdown option:selected').html();
$("#test").removeClass();
$("#test").toggleClass("overlay-" + getText);
});
});
.overlay-Steinkjer {
background-color: red;
}
.overlay-Verdal {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<select id="dropdown">
<option value="1">Steinkjer</option>
<option value="2">Verdal</option>
</select>
<p id="test">test paragraph</p>
</body>
</html>
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"));
});
});
I have div with <\select> drop down. And from the Drop down if I select limited it opens a div with Input and it works fine.
I also added one link + Add New and clicking on the +add new creates a new div with the <\select> drop down which should work same as before but when I select limited from the new drop down it effects the previous one. How can I make it so that it only open for the div I am working and do no effect other divs no meter how many I create.
JS FIDDLE
HTML
<div class="wrapper">
<div class="row">
<select class="optionSelector">
<option>-Select-</option>
<option value="limited">Limited</option>
<option>Unlimited</option>
</select>
<div class="limited" >
<input type="number">
</div>
</div>
</div>
Jquery
$('.add').click(function() {
$(".wrapper").append('<div class="row"><select class="optionSelector"><option>-Select-</option><option value="limited">Limited</option><option>Unlimited</option></select><div class="limited" ><input type="number"></div></div>');
});
$(".wrapper").on('change', '.optionSelector', function(){
$('.limited').hide();
$('.' + $(this).val()).show();
});
you can use .siblings() to get only the dropdown next to it
demo
$(".wrapper").on('change', '.optionSelector', function () {
$(this).siblings('.limited').hide();
$(this).siblings('.' + $(this).val()).show();
});
Try:
$(".wrapper").on('change', '.optionSelector', function(){
$(this).closest('.row').find('.limited').css('display', $(this).val()=='limited'?'block':'none');
});
jsFiddle example
The $('.limited') selector gets all the elements with the class .limited.