We Keep Coding

JS click in a Jquery function on load

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');
}

How to simulate a click event when document onready?

The two method below are not working for me; I need the button click event to fire with the document onready event. (#usrpost is a button element.)
$(function() {
$("#usrpost").trigger("click");
$("#usrpost").live("click",function() {
//do something.
});
});
I've also tried the following:
$(function() {
$("#usrpost")[0].click();
$("#usrpost").live("click",function() {
//do something.
});
});

You need to trigger the event after the handler is added(apart from the spelling issue, also assuming you are using jQuery < 1.9)
$(function () {
$("#usrpost").live("click", function () {
//do something.
});
//fire it after the handler is added
$("#usrpost").click();
});
Note: If you are using jQuery >= 1.7 use .on() instead of .live()

$(function() {
$("#usrpost").on("click", function() {
//do something.
});
$("#usrpost").click();
});
You had a typo in "function"

You must call the .click() after bind the event:
$(function() {
$("#usrpost").live("click",function() {
//do something.
});
$("#usrpost")[0].click();
});
.live() is also now deprecated in favour of .on():
$(function() {
$('body').on('click', "#usrpost", function() {
//do something.
});
$("#usrpost")[0].click();
});

You can trigger the event too
$("#usrpost").trigger("click");

Removing onclick listener for a part of division

I have a button inside a division.Both have separate onclick listeners.But since button is a part of the division,the event attached to button is also triggered when clicked.Is there a way to remove it?
i tried :not / .not.it dint work.
<div id="divson">
<button id="btn"></button>
</div>
$('#divson').not('#btn').click(function sayHello() {
alert('Helo!');
});
$('#btn').click(function sayJello() {
alert('Jelo!');
});
http://jsfiddle.net/gw3LqrcL/

Just return false; in your handler to stop the event propagation: http://jsfiddle.net/gw3LqrcL/1/

Use stopPropagation on the event passed in to the handler on #btn to stop the event bubbling to the parent element:
$('#divson').click(function () {
alert('Helo!');
});
$('#btn').click(function (e) {
e.stopPropagation();
alert('Jelo!');
});
Updated fiddle

Unbind and rebind click on css transition end

I'm having troubles with the .bind() and .unbind() features. When the button is clicked, it's supposed to change the color of the box. During this time, the button is disabled by unbinding the click function. However, I'm having issues rebinding the click when the css transition completes.
What I have so far is:
$('button').on('click', function(){
$('button').unbind('click');
$('.box').toggleClass('color');
$('.box').one('webkitTransitionEnd transitionend', function(e){
console.log('transition ended')
$('button').bind('click')
});
});
http://jsfiddle.net/t6xEf/

You need to pass the click handler when binding it. So create a function reference then use it while binding the handler.
function click() {
$('button').off('click.transition');
$('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
console.log('transition ended')
$('button').on('click.transition', click)
});
$('button').on('click.transition', click);
Demo: Fiddle
Also look at the usage of namespaces while registering/removing the handler because if there if some other click handler added to the button we don't want to disturb it
Also do not add a event handler inside another one
Also have a look at .one()
function click() {
$('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
console.log('transition ended')
$('button').one('click.transition', click)
});
$('button').one('click.transition', click);
Demo: Fiddle

I would use a flag instead of binding/rebinding the event handler:
var animating = false;
$('button').on('click', function() {
if (animating) return;
animating = true;
$('.box').toggleClass('color')
.on('webkitTransitionEnd transitionend', function(e) {
animating = false;
});
});
http://jsfiddle.net/t6xEf/1/

Do not unbind. Use a boolean:
var onTrans = false;
$('button').on('click', toggle);
function toggle() {
if (!onTrans){
$('.box').toggleClass('color');
onTrans = true;
$('.box').on('webkitTransitionEnd transitionend', function (e) {
onTrans = false;
});
}
}
http://jsfiddle.net/jp8Vy/

This is surely not what you want to do. It seems overly complex, and I can't imagine a good use case scenario.
That being said, you need to reattach the functionality to be performed in the final bind statement. You call the function to bind to the click event, but don't tell the function what to attach.
You need something like this:
$('button').bind('click', function() { ... });
However, that probably isn't what you really want. It sounds like you just want to set the button's "disabled" attribute to false, then to true after the animation.

run function at ready and keyup event

Is there another in jquery to run a function at page load and at a keyup event instead of the way I'm doing it?
$(function() {
totalQty();
$("#main input").keyup(function() {
totalQty();
});
});

Disregarding live or delegate optimizations, you can trigger an event like this:
$(function() {
$("#main input").keyup(function() {
totalQty();
}).filter(":first").keyup(); //Run it once
});
No need for the filter if it's not on multiple elements, just leave it out in that case.

You can use $(document).ready event to run functions on load:
$(document).ready(function(){
/* your code here */
});

Here's what I would do (jQuery 1.4+ )
$(document).ready(function() {
totalQty();
$("#main").delegate("input","keyup",function() {
totalQty();
});
});

You could use $.live(), which does event delegation, which is MUCH more efficient than created an event listener for every single input tag...and then missing any dynamically created ones. Try the following:
$(document).ready(function() {
totalQty();
$('#main input').live('keyup', function() {
totalQty();
});
});