Develop Reference

JQuery click() event listener not working

im trying to get a lil project going but im stuck on a very annoying thing.
$(document).ready(function() {
$("#search-button").click(console.log('hello'))
});
as you can see im targeting a search button with the id search-button and as soon as i click it something should happen. in this case i put a console.log in to test if it works but it doesn't. it always logs it as soon as i load the page , not when i click the button i target. ... what am i doing wrong
if you need more info on this pls tell me i tried to keep it as simple as i could
ty for your help
O.k

The click handler needs a function argument, not just the console.log by itself. Try this:
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});

Inside of .click should be a handler .click(handler) and the handler should be a function. The browser is reading the code and when it hits console.log('hello'), it does it! It's seeing .click etc, but it doesn't matter; it next sees console.log and does it.
Try
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});

As others have mentioned, the click function requires its own callback function. You can also use this, without requiring the use of document:
$("#search-button").on('click', function() {
console.log('hello')
})

I hope You're using jQuery version 3 or up. if you use 3 or up jquery version the good practice is you use Document binding Example:
jQuery(document).on('click', '#search-button', function(event) {
//your Code here...
console.log('hello');
});

Exactly the same javascript but one isn't working?

I wanted to create a checklist that would move a slider as the user ticked boxes. I found the following 2 pieces of code:
http://jsfiddle.net/t2nvft7q/
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked', true);
}
});
And then I found this which is more like what I want to do and based on the first one:
http://jsfiddle.net/ezanker/UznQe/
But on the second one if you click one of the boxes, untick it and then tick it again it stops working?
As far as I can tell it's because of that bit of code above. I've commented out things and moving them around to see what runs first, I've tried replacing parts of the second fiddle with the first and as far as I can tell the only difference between the html / css is the second has a value field on the checkboxes but editing this doesn't have any effect.
Could someone point out what I'm missing?

You shouldn't use .attr to set the checked property, use .prop instead. .attr is for setting attribute on the element, and .prop is for settings properties.
Example (JSFiddle):
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').prop('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').prop('checked', true);
}

You should use .prop, but for the check itself I would just use .hasClass()
Since the code already gives the clicked element the class of checked, there's really no reason to look any deeper than the clicked element which you already have as $(this).
See this working example:
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).hasClass('checked')) { // here use `.hasClass()` for the check
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').prop('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').prop('checked', true);
}
// .....
});

Select all elements except ... in jQuery

I am working on a project, what includes a smartsearch engine.
I'd like to write a method what makes the client write inside the smartsearch, even when it's not focused. F.e. browsing the site, the client hits down a key, and the focus jumps to the smartsearch.
That's working fine with this simple code:
$(document).ready(function()
{
$("*").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But, yeah as You can see, it unfocuses other inputs too, and that's not the way I want it.
I have tried several 'possible-solutions', like :not() and even .not() method like:
$(document).ready(function()
{
$("*").not("input").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But it still unfocuses fields with "input" tagname too. What should I do to force jQuery not to select input fields for this event listener?
Thanks, Steven.

$(document).keydown(function() {
if (!$('input').filter(':focus').length) {
$('#b').focus();
}
});
Working fiddle

$(document).ready(function () {
$(document).keydown(function (e) {
$("input.ss-24#b").focus();
});
});
Does this work?
http://jsfiddle.net/Xbbu8/

Clear input box on click with Jquery

I have a simple code that I'm trying to wrok into my website to clear a textbox with a default value, when a user click on it, the default value should clear out so that the user can enter his/her value. Here is what I have but I'm not sure if its correct since its not working. I just started on JQuery
$(document).ready(function()
{
$('#startDateBox').click(function()
{
if(('#startDateBox')=='Beginning')
{
$('#startDateBox').val('');
}
})
});​

You missed the first .val(), and the $ in front of the ('#startDateBox') on the same line.
You could also use $(this) to reference the textbox, as within that function this refers to the textbox DOM element itself. Wrapping it with the jQuery function $() gives you access to all the framework's goodies.
$(document).ready(function()
{
$('#startDateBox').click(function(){
if($(this).val() == 'Beginning')
^^^^^^ Here
{
$(this).val('');
}
})
});​

You're wrong in this part:
if(('#startDateBox')=='Beginning')
First, you missing $.
Second, I think you want compare the startDateBox value, then use val().
Try this:
$(document).ready(function()
{
$('#startDateBox').click(function()
{
if($('#startDateBox').val()=='Beginning')
{
$('#startDateBox').val('');
}
})
});​

Well, if(('#startDateBox')=='Beginning') will always be false...
I think you meant something more like:
if($('#startDateBox').val() == 'Beginning')

I wrote a very small jquery plugin for this purpose recently:
https://gist.github.com/rmcvey/5136582
$('#input').placeholder("Placeholder Text");
if($('#input').val() === $('#input').placeholder()){ return false; }

I would suggest for HTML5 browsers use this
<input type="text" id="Beginning" placeholder="Beginning" />
if($('#startDateBox').val() =='Beginning')
this is the line that needs to be changed
also
$('#startDateBox').on("focus", function()
{
// code here
the click will not handle hitting tab until that text box is focused

mixing my jQuery click events with existing object's onclick attribute

I'm using jQuery but dealing with markup produced from JSF pages. A lot of the elements have onclick attributes provided by the JSF code (which isn't my realm).
Example:
<div onclick="[jsf js to submit form and go to next page]">submit</div>
I'm trying to add some client side validation with jQuery. I need something like this pseudo code:
$('div').click(function(e){
if(myValidation==true){
// do nothing and let the JS in the onlick attribute do its thing
} else {
$error.show();
// somehow stop the onclick attribute JS from firing
}
})
Is there a best-practice for handling this?
One thought I had was that on page load, grab the onclick attribute's value, delete the onclick attribute from the object, then...well, that's where I get lost. I could cache the JS as text in a data- attribute, but I'm not sure how to fire that off later.

Just use eval to run onclick attribute code in your jQuery click event if you want it. You need to remove onclick attribute
<div onclick="alert('hi');">submit</div>
-
$(document).ready(function() {
var divClick = $('#theDiv').attr('onclick');
$('#theDiv').removeAttr('onclick');
});
$('#theDiv').bind('click', function(e) {
if (myValidation == true) {
// do nothing and let the JS in the onclick attribute do its thing
eval(divClick);
} else {
$error.show();
// somehow stop the onclick attribute JS from firing
e.preventDefault();
}
});

Either return false or use:
e.stopPropagation()
or
e.preventDefault()
Depending on your needs.

EDIT
You can save original event:
var originalEvent = $('div').attr("onclick");
$('div').attr("onclick", false);
$('div').click(function(e) {
if (false) {
// do nothing and let the JS in the onlick attribute do its thing
eval(originalEvent);
}
else {
alert("error");
// somehow stop the onclick attribute JS from firing
}
});
take a look at this http://jsfiddle.net/j4jsU/
Change if(false) to if(true) to see what hepens when form is valid.

I like e.stopProgation() and e.preventDefault(), but if you do not prefer that strategy, you could also manually remove the onclick() attribute and manually call the function it was using upon successful validation.
Different strokes..

Why can't you do something like:
div=document.getElementById('test');
oldClick=div.onclick;
bol=false;
div.onclick=function(){
if(bol){
oldClick();
}
else {
alert('YOU SHALL NOT RUN INLINE JAVASCRIPT');
}
}