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

Click anchor element using javascript function

I know this has been covered elsewhere on this site, as well as many others, but I just can't seem to figure it out.
I have an anchor tag that I use to show a lightbox form:
<a id="aNoData" href="#divNoData" class="fancybox">No Data</a>
I want to click it using a javascript function:
function fnNoData()
{
// This line works
alert("this line works");
// Neither of these lines work
$('#aNoData').click();
document.getElementById('aNoData').click();
}
I'm calling the function from my code behind, like this:
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "fnNoData()", true);
When I do this, the first line (the alert box) shows fine. However, the other two lines (to click the anchor tag) do not. The non-working lines work great if I put them in my $(document).ready block (the anchor clicks on page load). So it seems that the lines to click my anchor work fine, just not in my function.
Can anyone see what I'm doing wrong?

If you want to do click directly than you can use trigger
Check this hope this will helps you.
function fnNoData()
{
// This line works
alert("this line works");
//trigger
$('#aNoData').trigger('click');
//document.getElementById('aNoData').click();
}

jquery click event is expecting a function
(not tested)
$('#aNoData').on("click", function() {
console.log( "clicked the element with id aNoData );
});
in case you want to trigger the click(without the actual click), jquery has a function for that too:
http://api.jquery.com/trigger/

Quote from your comment
OK Patrick, thanks, and I did try putting the whole function inside my $(document).ready block, but it doesn't work at all there
You should not define the whole function inside $(document).ready(), instead define it outside and call it from inside the ready() function
Your original function
function fnNoData(){
// This line works
alert("this line works");
// Neither of these lines work
$('#aNoData').click();
}
Call it from ready()
jQuery(document).ready(function () {
fnNoData();
});
Hope this helps!

It took hours, but I finally brute-forced a solution.
As some repliers suggested, my code behind was trying to use the DOM before all elements were fully loaded. I got around that by changing the line in my code behind to this:
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "$(window).load(function() {fnNoData();});", true);

Meteor + Bootstrap - Alert closed.bs.alert does not trigger

I'm using Meteor and Bootstrap, with the nemo64:bootstrap package. In custom.bootstrap.json I have "alerts" and "alert" on.
I'm trying to capture the closed.bs.alert event in a Template events. For some reason, it won't capture.
Template.alert.events({
'closed.bs.alert .alert': function () {
console.log('closed'); // does not trigger
}
});
Oddly, close.bs.alert does work:
Template.alert.events({
'close.bs.alert .alert': function () {
console.log('closed'); // triggers
}
});
Also, if I add the event via jQuery, I can capture closed.bs.alert:
$('.alert').on('closed.bs.alert', function () {
console.log('closed'); // triggers
});
So, I know I have my events formatted correctly and I know the closed.bs.alert event is triggering... but for some reason I can't catch it with Template.alert.events.
Any ideas?

I dove in to the Bootstrap code and found where it triggered this event: alert.js, line 50
First, the technique that I got to work:
Templates.alert.onRendered({
$('.alert').on('closed.bs.alert', function (e) {
console.log('closed'); // triggers =D
});
});
I think the problem lies in the fact that Bootstrap detaches the alert before triggering the event, so things like $(document).on('closed.bs.alert', '.alert') can't work. I don't know 100% for sure, but I suspect Meteor's Template.my_template.events() trigger using a very similar method as well.
Normally this would work:
$(function () {
$('.alert').on('closed.bs.alert', function () {
console.log('closed'); // doesn't trigger
});
});
However, Meteor throws a wrench in to that plan because I'm loading the alerts from data, they aren't there when that would trigger.
However, by putting a jQuery-style on() in a Template.my_template.onRender() seems to do the trick.
Also, Bootstrap doesn't throw the event unless the alert has the "fade" class. You can assign the fade class without including the "transition" module. If you leave it off, you just won't get the effect, but the event can fire regardless.

Clicking objects created with Handlebars doesn't work

I upload all the stuff so you could see what I mean: http://nonemoticoner.com/learning/jquery/clickbug/
The point is that I cannot click divs I created with Handlebar, this is:
firstthumbin (id),
restthumbing (class)
They exist on thumbnails so I could use them to switch between galleries.
In script.js I created handlers in jQuery so I could click ones. None of them work :(
$('div#firstthumbing').on('click', function () {
console.log('clicked first');
changeSli(galInView, 0);
});
$('div.restthumbing').on('click', function () {
console.log('clicked rest');
changeSli(galInView, 1);
});
$('.thumb').on('click', function () {
console.log('clicked first thumb');
changeSli(galInView, 0);
});
I don't know why but a little above click works correctly. Is that because of Handlebars? How can I solve it? Please help me, I really tried to fix it by myself but this thing is really new to me. Click always used to work for me.

You are loading the firstthumbing after "onload" event, and you click function not binding becouse the element doesn't exist on DOM whe you run the script to haddle the click function.
Try to call the click function before create you clickable thumbs.

Not work my function after click?

I not know why not work following code for my function(alert()) and is run my function(alert()) after tow times click on button, did you can guide me?
Demo:(Here see my full code) http://jsfiddle.net/pRXQ7/1/
$('.iu').click(function() {
if(alert() == true){
alert('ok')
}else{
alert('no')
}
});

By naming your function alert, you've effectively overridden the native javascript alert function. Name it something else.
Also, in your alert function, you are referencing this. In the scope of the function, this points to the document object, not the element which was clicked. Try passing the element instance to your function from the click event handler.
See http://jsfiddle.net/pRXQ7/15/