I have a JS function that I want to automatic click in a jquery.click link when page loads.
How can I make it work?
Fiddle
When page loads I want to see the alert, no click in the link needed.
js:
window.onload = function(){
document.getElementsByClassName("c").click();
}
$(".c").click(function(){
alert("ok");
});
html:
test
you need to attach click event before trigger event.
DEMO
Change
document.getElementsByClassName("c")
to
document.getElementsByClassName("c")[0]
Use Below code
$(document).ready(function(){
$(".c").click(function(){
alert("ok");
});
});
window.onload = function(){
document.getElementsByClassName("c")[0].click();
// Or use jQuery trigger
// $(".c").trigger('click')
}
DEMO HERE
trigger click on document.ready
$('document').ready(function(){
$(".c").click(function(){
alert("ok");
});
$('.c').trigger('click');
});
Trigger event right after you create handler
$(function(){
$(".c").click(function(){
alert("ok");
}).click();
});
DEMO
Try this way
$(document).ready(function(){
$(".c").trigger('click');
});
getElementsByClassName Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node.
To assign a click handler, either you will have to iterate through nodelist or just assign event to first element
Try this:
window.onload = function () {
document.getElementsByClassName("c")[0].click();
};
$(".c").click(function () {
alert("ok");
});
So you can push your alert into a function :
function callAlert() {
alert('a');
}
And you can change the event click like this :
$(".c").click(callAlert);
Finally you can call the alert function when page loads like this :
$('document').ready(function(){
callAlert(); // call here
});
Code :
$('document').ready(function(){
callAlert();
$(".c").click(callAlert);
});
function callAlert() {
alert('a');
}
Related
I'm trying to select the list anchor link using jquery. Though 'list' link doesn't exist in the page as shown in the console output, it seems 'click' is still getting triggered. What could be causing 'list' and 'add' to trigger?
I have this simple code using jquery 1.10.2:
<!-- List -->
Delete
Add
<script>
jQuery(document).ready(function($) {
if ($('a[href$="#list"]').length>0){
console.log('list found');
}else{
console.log('list not found');
}
function opentab(value){
console.log('opentab: ' + value );
//perform task here
}
$(document).on('click', 'a[href="#list"]', opentab('list'));
$(document).on('click', 'a[href="#add"]', opentab('add'));
});
</script>
console output:
list not found
opentab: list
opentab: add
Here's jsfiddle link: http://jsfiddle.net/2FHf6/
you need to declare a function in the event that when this event occurs call this function, currently the method inside event is called on page load as your way of calling is not right:
do like this:
$(document).on('click', 'a[href="#list"]', function(){
opentab('list')
});
$(document).on('click', 'a[href="#add"]', function(){
opentab('add')
});
UPDATED FIDDLE
$(document).on('click', 'a[href="#list"]', function(e){
opentab('list');
});
$(document).on('click', 'a[href="#add"]', function(e){
opentab('add');
});
Demo:
http://jsfiddle.net/XJhN6/
See this updated fiddle.
When you want to call a function on an event triggered and the function needs to pass values, you have to do it in an "wrapper" function, like this:
jQuery(document).ready(function($) {
if ($('a[href$="#list"]').length>0){
console.log('list found');
}else{
console.log('list not found');
}
function opentab(value){
console.log('opentab: ' + value );
//perform task here
}
$(document).on('click', 'a[href="#list"]', function() {
opentab('list');
});
$(document).on('click', 'a[href="#add"]', function() {
opentab('add');
});
});
Otherwise it will be called when the event listener is set, not on the actual event.
I have this code:
$('input.ShowResellerAccounts').on('click', function(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
which hides/shows a table tbody id on click.
how can i make this code run on page load as well as on click?
In the document.ready function you can trigger the click event like
$('input.ShowResellerAccounts').trigger('click');
Separate it into a function and bind in on load as well as on click:
function checkInput(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
$(document).ready(function() {
$('input.ShowResellerAccounts')
.on('click', checkInput) // bind to click
.each(checkInput); // call now
});
u can use $(document).ready :
$(document).ready(function(){
//put your code here
});
I am a jQuery beginner and want to achieve the following - whenever I click on any element of the page, I want the color of the text inside it to be changed to red. This is what I have but it doesn't work. Surprisingly the alert statement also prints nothing. But it does executes as I tested it with another alert statement. Thanks.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div>Cow</div>
<div>Cat</div>
<p>paragraph</p>
<p>coconut</p>
<script type="text/javascript" src="../Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(this).click(function () {
var v = $(this).text();
alert(v); // this prints nothing !!!!
$(this).css("color", "red");
});
</script>
</body>
If you attach the click handler to the document, any click that bubbles up to the document will go to the event listener. If you now within the listener look for the event.target, that will be the node that initiated the event:
$(document).click(function (event) {
$(event.target).css("color", "red");
});
example: http://jsfiddle.net/E9H22/
If you specify the body element (in place of this), then it works:
$('body').click(function () {
var v = $(this).text();
alert(v); // this prints something, now.
$(this).css("color", "red");
});
JS Fiddle demo.
You could also, of course, use:
$(this.document.body).click(function () {
var v = $(this).text();
alert(v); // this prints something, now.
$(this).css("color", "red");
});
JS Fiddle demo.
If you want only the clicked-element to have its text turn red:
$('body').click(function (e) {
$(e.target).css("color", "red");
});
JS Fiddle demo.
$(this).click(function () {
This is your problem.
Instead of saying this, you need to use CSS selectors to specify which elements will change color.
For example, you could try
$('div').click(function() { // Will change the color of the divs
var v = $(this).text();
alert(v); // this prints nothing !!!!
$(this).css("color", "red");
});
$('p').click(function() { // Will change the paragraphs
...
});
$('p, div').click(function() { // Will work for either one!
...
});
$('*').click(function() { // Will work for any element on the page
...
});
In your
$(this).click(function () {
"this" doesn't refer to where the <script> tag is located, but rather it refers to window object. So in essence your code does this:
$(window).click(function (){
If you want the cow to turn red, when clicking it, change HTML to:
<div id="cow">Cow</div>
And your script:
// callback needs to be inside $(document).ready(fn) to make sure the DOM is ready when trying to use it
$(document).ready(function () {
// and we need to refer to an explicit element
$('#cow').click(function (){
// now we can refer to "this", since inside the click handler's context is the clicked element
$(this).css({color: 'red'});
});
}
You must specify to which element you wanna add a click event. E.g. this will work for all the div-elements:
$('div').click(function () {
$(this).css("color", "red");
});
You need to wrap that in a document ready statement, and attach the click listener to an actual element:
$(function(){
$("*").click(function () {
$(this).css("color", "red");
});
});
Your selector could look something like $("div, p").click(...) depending on which elements you want to be active.
Wanted to have a word counter next to a input textbox on the website
Got it working to show the count when the user click or modify the text but I wanted to load up straight away when the page finish loading.
$(document).ready(function() {
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($(this).val().length +' chars');
}
});
So I tried this the code below but couldn't get it working and don't know why.
$(document).ready(function() {
if($("#product_name").length){
displayText();
}
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($(this).val().length +' chars');
}
});
Thanks so much.
Try this
if($("#product_name").length){
displayText();
}
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($("#product_name").val().length +' chars');
}
Demo: Fiddle
Problem was your displayText() call during page load. In displayText you had used $(this) to access the input field, which was working as a event handler. But when you call displayText directly this will point to the window object.
Try .on() with multiple event.
$("#product_name").on({
change: function() {
// Handle change event
},
keyup: function() {
// Handle keyup
}
});
and for "when the page finish loading." use $(window).load(function() { });
In my code I have the following:
$(document).ready(function(){
$("input#Addmore").click(function(){
$('div#add_div').append("<a class='remove' href='#'>X</a>");
});
});
This code on click of add more button and I want to remove parent div of above added code on click of "X" by jquery. for that purpose i am using this code
$("a.remove").click(function(){
$(this).closest("div").remove();
});
But the code is not working because jQuery did not getting append anchor code. Can any one tell me the solution?
You need to delegate the event to the nearest static element. Try this:
$('#add_div').on('click', 'a.remove', function() {
$(this).closest("div").remove();
});
Or if you are using an older version of jQuery (less than 1.7) use delegate() like this:
$('#add_div').delegate('a.remove', 'click', function() {
$(this).closest("div").remove();
});
Try this
$('#add_div').delegate('a.remove', 'click', function() {
$(this).closest("div").remove();
});
Or you can try this:
$("input#Addmore").click(function(){
$("div#add_div").append("<a class='remove' href='javascipt:;' onclick='remove(this);return false' href='#'>X<br/></a>");
});
and here is remove function:
window.remove = function(obj)
{
$(obj).closest('div').remove();
}
see here : http://jsfiddle.net/Hvx2u/3/