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.
Related
I have a link:
<ul id="titleee" class="gallery">
<li>
Talent
</li>
</ul>
and I am trying to trigger it by using:
$(document).ready(function() {
$('#titleee').find('a').trigger('click');
});
But it doesn't work.
I've also tried: $('#titleee a').trigger('click');
Edit:
I actually need to trigger whatever get's called here <a href="#inline" rel="prettyPhoto">
If you are trying to trigger an event on the anchor, then the code you have will work I recreated your example in jsfiddle with an added eventHandler so you can see that it works:
$(document).on("click", "a", function(){
$(this).text("It works!");
});
$(document).ready(function(){
$("a").trigger("click");
});
Are you trying to cause the user to navigate to a certain point on the webpage by clicking the anchor, or are you trying to trigger events bound to it? Maybe you haven't actually bound the click event successfully to the event?
Also this:
$('#titleee').find('a').trigger('click');
is the equivalent of this:
$('#titleee a').trigger('click');
No need to call find. :)
Sorry, but the event handler is really not needed. What you do need is another element within the tag to click on.
<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>
Jquery:
$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works
This is all about what you are clicking and it is not the tag but the thing within it. Unfortunately, bare text does not seem to be recognised by JQuery, but it is by vanilla javascript:
document.getElementById('test1').click(); // Works!
Or by accessing the jQuery object as an array
$('#test1')[0].click(); // Works too!!!
Since this question is ranked #1 in Google for "triggering a click on an <a> element" and no answer actually mentions how you do that, this is how you do it:
$('#titleee a')[0].click();
Explanation: you trigger a click on the underlying html-element, not the jQuery-object.
You're welcome googlers :)
If you are trying to trigger an event on the anchor, then the code you have will work.
$(document).ready(function() {
$('a#titleee').trigger('click');
});
OR
$(document).ready(function() {
$('#titleee li a[href="#inline"]').click();
});
OR
$(document).ready(function() {
$('ul#titleee li a[href="#inline"]').click();
});
With the code you provided, you cannot expect anything to happen. I second #mashappslabs : first add an event handler :
$("selector").click(function() {
console.log("element was clicked"); // or alert("click");
});
then trigger your event :
$("selector").click(); //or
$("selector").trigger("click");
and you should see the message in your console.
Well you have to setup the click event first then you can trigger it and see what happens:
//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
evt.preventDefault();
alert($(this).attr('href'));
});
// now the manual trigger
$myLink.trigger('click');
This is the demo how to trigger event
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
</script>
</head>
<body>
<input type="text" value="Hello World"><br><br>
<button>Trigger the select event for the input field</button>
</body>
</html>
This doesn't exactly answer your question, but will get you the same result with less headache.
I always have my click events call methods that contain all the logic I would like to execute. So that I can just call the method directly if I want to perform the action without an actual click.
For links this should work:
eval($(selector).attr('href'));
You should call the element's native .click() method or use the createEvent API.
For more info, please visit: https://learn.jquery.com/events/triggering-event-handlers/
We can do it in many ways...
CASE - 1
We can use trigger like this : $("#myID").trigger("click");
CASE - 2
We can use click() function like this : $("#myID").click();
CASE - 3
If we want to write function on programmatically click then..
$("#myID").click(function() {
console.log("Clicked");
// Do here whatever you want
});
CASE - 4
// Triggering a native browser event using the simulate plugin
$("#myID").simulate( "click" );
Also you can refer this : https://learn.jquery.com/events/triggering-event-handlers/
Shortest answer:
$('#titlee a').click();
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.
I am trying to handle the click event using jQuery
on upload success, I am creating the following using jQuery:
$("#uploadedImage").append( "<div class='img-wrap'>
<span class='deletePhoto'>×</span>
<img data-id='"+files[i]+"' src='"+asset_url+"uploads/ad_photo/"+files[i]+"'>
</div>
<span class='gap'></span>");
and for handling click event for the above created div's I have written this:
$('.img-wrap .deletePhoto').click(function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
the above code is working properly and creates all div, but when I click on the deletePhoto span. no jQuery alert is showing.
Any help or suggestion would be a great help.
Thanks in advance
delegate the event and change as suggested:
$("#uploadedImage").on('click', '.deletePhoto', function() {
You have to delegate your event to the closest static parent #uploadedImage in your case which is available on the page load like the container which holds the newly appended div and image.
although $(document) and $(document.body) are always available to delegate the event.
It is better to use on() when you create new element after DOM has been loaded.
$(document).on('click', '.img-wrap .deletePhoto', function() {
});
You are creating your element dynamically that is why you would need .live()
but this method is deprecated in newer version.
if you want to use jquery 1.10 or above you need to call your actions in this way:
$(document).on('click','element',function(){
`your code goes in here`
})
try this:
$(".img-wrap .deletePhoto").on('click', function() {
});
You can change a little in your code.
$(".deletePhoto").off("click").on("click",function(){
//Your Code here
});
First check in debugging mode that you get length when your code is going to bind click event and another thing bind event must written after that element is appended.
And Also check css of your element (height and width) on which you are clicking and yes
$(document).on('click','Your Element',function(){
//your code goes in here
});
Will works fine
use delegate:
$('#uploadedImage').on('click','.img-wrap .deletePhoto',function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
see details delegate and .on here
How can i make jQuery in a link for onclick=""
I need for example something like this
<a onclick="jQuery:$('this').hide('slow')" href="#">Close</a>
I know how it is this to do with classic JavaScript, but i need this with jquery for effect slow
Bind the event separate from the <a> tag. Try this:
$(document).ready(function () {
$("a.close").on("click", function (e) {
e.preventDefault();
$(this).hide("slow");
});
});
with this HTML:
Close
DEMO: http://jsfiddle.net/rp3PZ/
If these elements are dynamically added, you can use event delegation like so:
$(document).on("click", "a.close", function (e) {
e.preventDefault();
$(this).hide("slow");
});
DEMO: http://jsfiddle.net/zvTer/
Instead of using document, you should probably want to use a closer, static container element. In that case, you'd need to use $(document).ready like the above, as well.
Per the comments, this close anchor seems to be nested in a container with a class "contentbox". To hide this container when the anchor is clicked, you can use $(this).closest(".contentbox").hide("slow");. Here's an example: http://jsfiddle.net/rp3PZ/1/
Using the inline event, do this:
<a onclick="$(this).hide('slow');return false;" href="#">Close</a>
You had single quotes around this which shouldn't be there.
http://jsfiddle.net/znAWq/
Try this;
<a onclick="$(this).hide('slow')" href="#">Close</a>
jsFiddle
It is good practice not to have inline javascript in your elements. Try adding a hook to your anchor element like a class or an id.
Document Ready:
$(function()
{
$(selector).click(function()
{
var $this = $('this');
$this.hide('slow');
return false;
});
});
Simple quick question....
I have the following link html:
<a href="http://www.site.com/" onmouseover="" />
I have a javascript function which I want to enter some onmouseover information into that link dynamically. So, lets say it then becomes this for example if this javascript function is called:
<a href="http://www.site.com/" onmouseover="alert('howdy')" />
any ideas how to do this?
Add name attribute to and assign onmouseover
<a href="http://www.site.com/" onmouseover="" name="xxx"/>
document.getelementsbyname('xxx').onmouseover = function() { alert('howdy') }
Answer was, using setAttribute() javascript.
I think you want to say: dynamically change your href attribute information then you can do it by jquery
//Write code for prompt box and get value (when mouse-over)
$("a[href='http://www.google.com/']").attr('href', 'YOUR_GET_VALUE')
If you can use jquery, see: http://api.jquery.com/hover/
This is better than changing the attribute directly. Your javascript function can dynamically bind/unbind the mouse hover event and execute your alert call.
Otherwise your javascript function will need to dynamically change the attribute but you'll need to work around browser differences to locate the correct element then locate and modify the onmouseover attribute.
two options:
if it's something small:
<a href="http://www.site.com/" onmouseover="this.href = 'http://stackoverflow.com'" />
if you have something more to do:
<script type="text/javascript">
function doSomething(elem) {
elem.href = 'http://stackoverflow.com';
}
</script>
test
Or as stated before: use jQuery or any other framework to make your life a lot easier
The following works for jQuery every time
first the javascript:
$(document).on('mouseenter','.hovLink', function (e) {
e.preventDefault();
e.stopPropagation();
alert('entering ' + e.target.id);
}).on('mouseleave','.hovLink', function (e) {
alert('exiting ' + e.target.id);
});
and here is the HTML
Link