We Keep Coding

JQuery click() triggers event in console but calls default from JS files

I have a form with a submit button. On manually clicking it, AJAX kicks in and prevents the default submit action. I want to trigger that behavior via JS or jQuery.
I have tried several methods:
$(document).ready(function(){
setTimeout(clicksubmitbutton(), 2000);
});
function clicksubmitbutton(){
//I tried these lines one at a time. :
$('#basketButton').click();
$('#basketButton')[0].click();
$('#basketButton').trigger('click');
$('#basketButton').triggerHandler('click');
}
The first 3 all worked fine from console (AJAX), but reloaded the page when called within js. What went wrong?

Don't invoke your function, just pass it. Observe the following...
setTimeout(clicksubmitbutton(), 2000);
=>
setTimeout(clicksubmitbutton, 2000);
JSFiddle Link - working demo
Also, .click() should work fine

understanding event handlers

As an exercise, I'm trying to add an event listener to an ebay.com element.
Expected result: show an alert and stop the web page from going to the next URL.
What happens: the alert is shown but the next URL is shown anyway.
I found something interesting on the product pages where I'm testing out preventDefault, stopPropagtion and stopImmediatePropagation.
No matter which combinations I use, nothing seem to work.
The basic code is:
$('#binBtn_btn').click(function(evt){
alert('hi');
evt.stopPropagation(); //or any other option.
});
The thing is that I get the alert, but it still goes to the next page, as if I never stopped the propagation.
I read a lot of articles about event handling, but I couldn't find the answer.
Your help is much appreciated.

My best guess it that the Button has its own click handler, and it's firing before yours.
$('#binBtn_btn').data("events") shows us that there is indeed a click event. Remove that using off.
$('#binBtn_btn').off('click');
Clicking the button now will still cause the form the submit, as all we're doing is browsing to a page. The button is actually just an a tag.
$('#binBtn_btn').click(function(e){
alert('Gotcha!');
e.preventDefault();
});
Let's see what happens if we remove their handler, add ours, and then re-add their one...
var existing = $('#binBtn_btn').data('events').click[0];
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); return false; });
$('#binBtn_btn').data('events').click.push(existing);
Same, but just looking at the function for the click handler (rather than tweaking the events.click array directly...)
var existing = $('#binBtn_btn').data('events').click[0].handler;
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); e.preventDefault(); });
$('#binBtn_btn').click(existing);
As expected, what is now the second handler -- their handler -- doesn't first. (I've added a return false; rather than e.preventDefault();, just to demonstrate different ways of doing things!)
You can check out what they're doing by placing a breakpoint and viewing the existing var above. You'll see that at the end of their function, they do indeed call e.preventDefault();.
Hope this helps.

try using evt.preventDefault() like this:
$('#binBtn_btn').click(function(evt){
evt.preventDefault();
alert('hi');
});
Then it will not go to the next page.

Event handlers not working correctly in jsfiddle

Trying to make a jsfiddle so I can post it on here and get some help with a problem; however, I'm having a problem getting jsfiddle to act as expected, so I'm having a problem trying to document my problem!
http://jsfiddle.net/eidsonator/he4Vc/#base
I'm trying to add a blur event handler to a input with id of "part". My alert fires as soon as the page loads (which it shouldn't) and doesn't fire when focus is lost. This behavior persists in chrome and in firefox (I'm coding for an internal web app, so I can ignore ie!)
$("#part").on('blur', alert('lost focus'));
I've changed the load method, and tried wrapping it in my own $(document).ready(function() {}); as well as using .blur() and different versions of javacript... any clues?
Thanks!

You are calling alert straight away, and passing the return value of it to the .on() method. Instead, you need to pass a reference to a function that can be invoked when the event is received:
$("#part").on('blur', function () {
alert('lost focus')
});
Here's an updated fiddle.

you have written a wrong syntax .see the docs for more info,and change your code to
$("#part").on('blur', function(){
//do something
});

JavaScript firing on page load instead of event (Bug)

I'm having the strangest issue when I'm calling in functions on an event. I'm trying to get a function to run when the window is resized using $(window).resize() but it seems to fire the function as soon as the DOM loads then never again.
I'm probably missing something really simple here but I've been looking at it all day and I need a bit of outside help.
I've created a watered down version on JSfiddle that does the same thing but using $('a').click() instead of $(window).resize() so it's a bit easier to test. As the same issue is cropping up I have a feeling there's something wrong with my function but I just can't see it.
Link is here http://jsfiddle.net/sambeckhamdesign/APLZ2/1/

Try:
$('a').click(function(){
alert('hello');
}, imageResizer());​

You are running the function and sending it's output into the jQuery thingy as a parameter:
$('a').click(alert('hello'), imageResizer());
instead, try this:
$('a').click(function() {alert('hello'); imageResizer(); });
This provides an anonyomous function, which will be run when the item is clicked, calling imageResizer(), whereas the way you had it, it ran the imageResizer() function and put it's return value into the onclick handler. The reason it didn't work later on was because it would have been treating whatever the return value of the imageResizer() function was as code that it was trying to run.

You are triggering the event instead of assigning an handler to it
$('a').click(alert('hello'), imageResizer());​
Should be
$('a').click(function(event) {
event.preventDefault(); // I suppose you will want that ... it will avoid your window jumping to the top when you click due to the href="#"
alert('hello');
imageResizer();
});​

jquery ajax calls are causing a page refresh

I have a button in my HTML page which is not part of any form.
<input type='button' id='submitter' value='add'/>
I have a click handler on it:
$('#submitter').click(function(e) {
e.preventDefault();
e.stopPropagation();
var args={}
$.get('notexists.php', args, function() {alert('what?');}, 'json')
.error(function(){ alert('error'); });
return false;
}
Now, notexists.php does not exist, so the click should alert error. But for some reason, The page refreshes with I click the button!
Some experiments I've tried to identify the problem:
removed everything from the handler (no return false, no prevent default, no stop prop, no jquery post call - nothing) - the page did not refresh on click, and it should not. the button is not a submit button, and it dont belong to no form.
removed teh $.post call - no refresh
enabled the firebug's "break on error" feature and tried clicking - refreshed again. so there is no error.
changed the post URL to something that exists and works - still refreshing
added an "alert" after the $.post call - it did not get called. Seems like the execution breaks at $.post, but there's no error (experiment 3).
changed the input to a "div" with the same id. Same results - page gets refreshed.
Can anyone help?
PS: I'm using $.post in MANY other parts of this app, and its working as expected everywhere.

Have you checked $('#submitter').length when you attempt to bind the event? Maybe you have duplicate id's in the dom? Have you got your script running before the closing body tag or inside a jquery doc ready block?
Posting a fuller code sample would help to eliminate the questions I pose.

I believe your selector isn't selecting the button, so the event handler is not being applied.
Test your selector by doing something like:
$("#submitter").val('Test');