hi jquery folks I have a jquery datepicker from jqueryui.com/datepicker/. Now i want to add some custom features to it.
The first question, If I enter the source of my page i cannot see the printed jquery code.
Only when I inspect the element(in opera) I can see the printed html. I hope this is not a problem..
When i click on the Next (span)button, i want to do some things. But the problem is I am not able to attach a function to the span class. I tried the following:
$(document).ready(function () {
$('.ui-icon.ui-icon-circle-triangle-e').click(function(){
window.alert("it works");
});
});
this code appears when I inspect the element:
<a class="ui-datepicker-next ui-corner-all ui-state-hover ui-datepicker-next-hover" data-handler="next" data-event="click" title="Next">ev
<span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>
How can this function on click work?
you have the selector wrong
.ui-icon ui-icon-circle-triangle-e
Looks for a element with class ui-icon-circle-triangle-e inside another element with class ui-icon.
When you want to select an element that has more than one class applied to it they need to be seperated by a period .
use
$("body").on('click', ".ui-icon.ui-icon-circle-triangle-e",function(){
window.alert("it works");
});
or just
$("body").on('click', ".ui-icon",function(){
window.alert("it works");
});
You are not calling it properly, it needs to be:
$('.ui-icon.ui-icon-circle-triangle-e').click(function(){
alert ('it works');
});
You made a blank instead of a point between your two classes in jquery.
$(document).ready(function () {
$('.ui-icon.ui-icon-circle-triangle-e').off('click').on('click',function(){
alert("Working");
});
});
If you are attaching event directly on the element better to use off and on.
Cheers !!
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 have the following jQuery on the page:
$('#nav-icon1,#nav-icon3').click(function(){
});
And corresponding HTML like this:
<div id="nav-icon3" class="">
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
</div>
There's no nav-icon1 anywhere on the page, but when I change the jQuery to be this:
$('#nav-icon3').click(function(){
});
It stops working.
What am I missing? Thanks!
it's necessary attach that event to your div? check if your spans are position "relative" because if they are "absolute" your div "nav-icon3" may not be visible with height:0px.
another way to add events is using "bind"
$(function(){
$("#nav-icon3").bind('click', function()
{
// some code...
});
});
or
$(function(){
$("#nav-icon3").bind('click', _onNavClick);
});
function _onNavClick(event)
{
// some code...
}
It seems different error, what you are doing is working just how it is. Check it here jsfiddle.net/ed9xsh62/ Check your console or share URL to check the exact error.
$(function(){
$( "#nav-icon3" ).click(function() {
//code goes here
//can do a simple alert to test the function
});
});
Could be a possibility that you just did not have your code in document.ready function (I used the shorthand version). I tried your code and it worked perfectly as long as it was in the document.ready function.
I have a html file and js file I want to execute JS when a button is clicked in html. for this I can use onclick event in html but the condition is that I should not modify the HTML file.
I tried to add eventlistener in my JS but that didn't worked.
<p align=center>
<button class="stdbutton" id=button2 name=button2>
Click Me
</button>
</p>
$("button2").click(function() {
alert("button2 clicked");
});
please see the fiddle link for further reference: http://jsfiddle.net/gqpr0g9w/
thanks in advance
Try the FIDDLE,
Basically the first issue with your fiddle was you are using js library other than jquery. Jquery code won't execute without referencing the jquery library.
Secondly you are using an invalid selector,
$("button2")
you can replace this with an id based selector (# selector) as per your markup
$("#button2")
And finally try wrapping the code under jquery closure under document ready event that will ensure that the event will attach when the related object is loaded on the browser.
Finally will becomes
$(document).ready(function() {
$("#button2").click(function() {
alert("button2 clicked");
});
});
Hope it works for you..
Include jQuery in your jsfiddle. Use one of the below to attach an event listener for click using jQuery
$("#button2").on("click", function() {
alert("button 2 clicked");
});
or
$("#button2").click(function() {
alert("button2 clicked");
});
case jQuery is included in the html:
js file -
$("#button2").click(function() {
alert("button2 clicked");
});
// notice the # symbol before the word "button2" representing that we are looking for an ID
case jQuery is NOT included in the html:
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>
jQuery script must first be included
and then you can execute the same code as shown above.
Well, you are trying to use jQuery, but there is no jQuery included in your html-File. In fact there is no script included in your html at all like
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>
I don't think you will be able to do that without modifying the html-file.
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.
I'm trying to select an element and then add / remove a class. I have achieved this plenty of times with other elements, however for this one it doesn't want to work.
My html is as follows:
<div>
<a class="login-headerText" id="hypLogin" style="padding-right:5px; float:left" >Login</a>
<h4 class="login-headerText" style="font-weight:bold; padding-right:5px; float:left">/</h4>
<a class="login-headerText" id="hypCreateAccount">Create Account</a>
</div>
The div is wrapped inside another div. (id=modal)
I want to select "hypLogin" then add a class to it on click. It works if i do this in the onClick event, however it wont work in a seperate script. (The script is referenced and works as it is used for other elements)
This is my jQuery
$('#hypLogin').click(function () {
$(this).removeClass('login-headerText').addClass('login-headerText-Unselected');
});
Tried debugging it and it's not getting hit at all.
Probably something really simple.
Couple of things:
you must do it on:
$( document ).ready(function() {
});
Does these elements printed dynamically?
try to use:
$('#hypLogin').on('click', function () {
});
try to put your code on modal open event.
Here is working fiddle
try this:
$(document).ready(function () {
$('#hypLogin').click(function () {
$(this).removeClass('login-headerText').addClass('login-headerText-Unselected');
});
});