making a link using jquery on images - javascript

I have a code where i need to create a href link to the images too. with the following screenshot
http://prntscr.com/iqo2ad
i tried it something like this:
$(document).ready(function() {
var link = $(".car-image").find('li:first').find('a').attr('href');
var appendtoimg = $('.car-image').closest('.img-responsive') - here i am stuck as i need to add an onclick event so it can work same as like <a> tag
});

If you're using jquery you can add a click event listener.
$(".car-image").click(function(){ });

Related

Click on first onclick function inside tag by class selected

I'm new here ... so let me know how I can click on the first onclick within this div . Note that if you do $ (".giornoweekcorrente" ) i select the entire interior of the div but my problem is, how do I get to click the function visualizzaEvento ... through the class " giornoweekcorrente " .
Take a look for this image to understand.
Thanks for any help !
Try like this. Hope this helps.
$('.giornoweekcorrente a:first').click();
A possible workaround:
// get the first anchor child of the element and trigger the desired event:
$('.giornoweekcorrente').on('click', function(){
$('a', this).first().trigger('click');
});
var target = $(".giornoweekcorrente").children()[0]
$(target).click(function(){
visualizzaEvento();
});
just find the children of your div, and find the first child.
see : https://api.jquery.com/children/
Your anchor tag has an id why not use that:
$("#lente_click_gio").click();
Markus, you might want to attach "onclick" to the element with id "lente_click_gio" directly. You can do that using the following code:
$(document).ready(function(){
$("#lente_click_gio").on('click',function(){
//Your code here .. Call visualizzaEvento
});
});
But this would just attach the click event and the callback to it. Instead if you want to trigger a click event on the anchor element where you have attached the function, try the following code:
$("#lente_click_gio").click(); /* Generate a click event on the element with the ID lente_click_gio */
This would trigger a click event on that element. Hope this would help.

How to call click() for element?

I am using a lightgallery plugin where the click event is defined as:
$(document).on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
self.start($(event.currentTarget));
event.preventDefault();
});
However, when I try to call the event like this:
$(".catalog-content a[data-lightbox='test']").first().trigger('click');
... it doesn't seem to work. What am I doing wrong? How can I trigger the click event?
Example jsFiddle
To "simulate a click" using jQuery, you are correct in that you can just use the .trigger(...) method:
$(".myClass").trigger("click");
The real issue is that you are "clicking" something that doesn't exist. There is no ".catalog-content a[data-lightbox='test' element. As Velthune suggests, you can add the .catalog-content class to the div container to fix this; however, note that there also is no a[data-lightbox='test'] element.
Instead, in your Fiddle you define the following:
<a href="http://..." data-lightbox="350xi" id="test">
something
</a>
So you actually just want to click on the first a element with a data-lightbox attribute of "350xi":
$("a[data-lightbox='350xi']").first().trigger("click");
Hey i have gone through the jsfiddle and updated it please go through it..
$(document).ready(function() {
$(".cars-container a[rel!='']").click(function() {
var rel = $(this).attr("rel");
$(".cars-container a[data-lightbox='" + rel + "']:first").trigger('click');
});
});
click below jsfiddle link to see the working example:-
http://jsfiddle.net/wHJ8E/3/
Your code in fiddle can't work.
1) Either use a different selector as Devendra suggested.
2) Or add the .catalog-content class to the div container:
<div class="cars-container catalog-content">
Fiddle
3) Both Devendra and I can't understand.

How to disable anchor element on load using jquery?

In my project , there is one anchor element as follows.
TRY NOW
I just want to disable the above anchor element when page completely loads. Actully I have used removeattr property of jquery. But I only want to disable the anchor element without removing onClick() event. So please help me in this question.
You say you'd like to keep your existing attribute handler. I suppose you're talking about handler definition, but not its processing, because that's what you're trying to prevent.
Solution 1: remove attribute completely
$(function(){
$(window).load(function(){
$("a").removeAttr("onclick");
});
});
Solution 2: change attribute code
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("onclick", "return;" + existing);
});
});
Solution 3: change attribute but store definition
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("data-onclick", existing)
.removeAttr("onclick");
});
});
This JSFiddle shows all three solutions. I've written it so that it doesn't change links on page load but rather simulates page load by clicking a link. Click any of the first three links first then simulate page load and click any link again and you'll see that all of them work.
You can try this
Using CSS
a{
pointer-events: none;
}
Dynamically using jquery
$(document).ready(function(){
$('a').css('pointer-events','none');
});
write script like below
$(window).load(function(){
$("a").removeAttr("onclick");
});

How to preprocess the HTML content using Jquery "ON"?

I have very simple jQuery Accordion, it is working fine, now the issues are if i load the accordion content dynamically either from DB or from JSON to page, It is not working, because there is no information to DOM to understand the class or ID which newly injected. so i am trying to use Jquery ON instead live or delegate to capture the injected elements. my sample code is..
jQuery("#header").on("click", function () {
.... my accordion code here
});
but jquery "on" will trigger on any event like click or something, so how to process the accordion html content to keep open in initial level and do further click.
How is this possible? i couldn't fine any solution
Check this: http://jsfiddle.net/RMBpt/
What i added:
var isActive = $(this).is('.on');
if(!isActive) { .. if active, it shouldn't collapse? }
//First element should be active, needs to be after the hide()
$('.accordionButton:first').addClass('on').next().slideDown('normal');
Try using it like this:
$("#wrapper").on("click", ".accordionButton", function(event){
//Your accordian code here
});

jquery: Unable to have the click event fire on image tag

I have a javascript code that have span tag and inside the span tag there is an image tag and normal text next to the image tag. I want to bind the click event on image tag but the event didn't fire at all. I use the jquery to accomplish this.
var a = new Image();
$(a).prop('src','blah');
$(a).load( blah);
$(span).append($(a));
$(a).click(function (e) { alert('asdf'); } );
not event if i do this
$(span).find($(a)).click( blah );
var button = $(this.imgClose).clone();
$(button).prop('id', 'close');
$(template).append($(button));
$(template).find('#close').on('click', '', function (event) { alert('sss'); });
Please try this since you are appending the a and then trying to click
Rest you can see #gdoron 's & #Andrew stuff above as well
API reside here: http://api.jquery.com/on/
Also prop vs attr : .prop() vs .attr()
hope this helps,
code
$('a').on('click', function(){
alert('HULK');
});
$(span).append($(a));
Should be:
$('span').append($(a));
Live DEMO

Categories