We Keep Coding

How do I pass parameters into a jQuery.click() function on a <span> tag?

I have used the jQuery.click() function in the past with buttons and have had nothing but success, but I tried to use it to click on a <span> and it doesn't work.
Also I noticed that it automatically executed my function without listening to the click.
Judging how I used it on buttons, this would be the syntax:
<p><span id="example">Click Here</span></p>
$("#example").click(exampleFunction(p1, p2));
But it does not seem to work. Again it just executes it without the click even taking place. I even tried:
$(document).on("click", "#example", exampleFunction(p1, p2));
Still no luck, same results.
I am making a weather app and my goal with this is to toggle the temperature between Fahrenheit and Celsius by clicking on the unit. I made a copy of the code for the app on codepen.io here:
Codepen Weather App
I appreciate the help!

Looks like you should try something like this:
$(document).on("click", "#example", function() {
console.log('Hello World');
});
Using the function() definition alone give me Uncaught SyntaxError: Unexpected token (.
What you're doing is binding an anonymous function to the click. If you were doing this somewhat differently, like MyFunction(), then it would only execute the function.
If you had MyFunction you could still trigger it using click like so:
function MyFunction() {
console.log('Hurra!')
}
$('#example').click(MyFunction)
Notice that I didn't use the parentheses otherwise it will actually run the function instead of binding it.

Try it like this:
$('#example').click(bleepme);
function bleepme(){
alert('hi');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><span id="example">Click Here</span></p>
Note that the on-click call to the bleepme function does not have parens -- if you put parens there, it will run the function at document.ready, but not upon click.
Example - no parens on click
Example 2 - parens on click

Well you should supply a body to the function :)
$("#example").click(function() {
alert('clicked');
});

I don't think that you really want to pass parameters into into the function. By the time someone is clicking on the temperature to toggle the units, the document.ready function has finished executing. You actually want to read the values for temp and units from the DOM or from local storage. So, you don't need to pass parameters into your function, which should make things a bit easier.

I think you code need to work like this way
$(document).ready(function(){
$('#example').on('click',function(){
// Some of your logic here
});
});

checkbox onclick function not called in IE

I have the following checkbox in HTML:
function updateSettings(id, bit) {
alert('0');
}
<input type="checkbox" onclick="alert('1');updateSettings(0, 1);alert('2');" />
In IE11 on click I get alerts 1, 2 but not 0: the function is not executed at all.
In Chrome everything works fine.

The function updateSettings is defined in IE on the document object. See this documentaion.
When you put a call inline, as in this case in an onclick, it will look first in the element itself if the function is defined. Then it will search the DOM tree up to document to see if the function is defined (some elements are searched and some not, unfortunately I didn't know the rule governing this until #user4749485 wrote his comment below), and after, as a last resort in window. As it find it, it runs it.
As you defined your own updateSettings probably on the global object (window), it's not fired in IE, because the function defined on the document object is found first.
End of mystery bug :-)
UPDATE :
#user4749485 pointed to the link explaining this at the w3 site, the information is in item 1.10 - Lexical Environment Scope. To sum it up :
<element onclick="functionFoo();">bar</element>
implies following procedure :
Does element.functionFoo exist ? YES ==> use this function.
ELSE
Does element belong(1) to a form and form.functionFoo exist ? YES ==> use this function.
ELSE
Does document.functionFoo exist ? YES ==> use this function.
ELSE
Does window.functionFoo exist ? YES ==> use this function.
ELSE
crash.
(1) = an element belongs to a form != an element is inside a form element. Roughly it must be a form element, like in the question an input element.

Found the issue, but it's strage. If you change the function name to lower case, then it works.
function updatesettings(id, bit) {
alert('0');
}
<input type="checkbox" onclick="alert('1');updatesettings(0, 1);alert('2');" />
DEMO: http://codepen.io/anon/pen/YXLgxJ
UPDATE: As Zimmi has explained updateSettings is an inbuilt method document.updateSettings() in IE and this will be triggered on onclick event instead of our method window.updateSettings()

I'd suggest not to use an inline onclick event and instead use jquery to define an event for the checkbox:
function updateSettings(id, bit) {
alert('0');
}
jQuery(document).ready(function(){
jQuery("#cbMyCheckbox").click(function(){
alert('1');
updateSettings(0, 1);
alert('2');
});
});
and then in your html:
<input type="checkbox" id="cbMyCheckbox" />

onclick function need to execute a simple javascript function

I have a button where I am trying to add on click jquery as below
<button onclick="myFunction()">YES</button>
And
$(document).ready(function() {
function myFunction(){
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
}
})
However, on click I am getting Uncaught ReferenceError: myFunction is not defined
What am I doing wrong and how to fix this?
Updated with a sample jsfiddle
http://jsfiddle.net/3aC7W/1/

What am I doing wrong and how to fix this?
You are defining the function inside another function, i.e. the function is not defined in global scope and hence cannot be found by the inline event handler.
Just remove $(document).ready(function() { because you don't need it there:
function myFunction(){
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
}
You only have to use $(document).ready(function() { ... }); if you manipulate the DOM, and also only if you place the script before the elements in the HTML document.
The better solution of course would be to bind the event handler with jQuery (and not use inline event handlers):
$(document).ready(function() {
$('button').on('click', function(){
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
});
});
You might have to add a class or ID to the button to make the selector more specific. Have a look at the list of available selectors.

change your code to this way to achieve click :
<button id="myFunction">YES</button>
and
$(document).ready(function() {
$('#myFunction').click(function(e){
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
});
});
check it at: http://jsfiddle.net/aneesh_rr/XJ758/3/

change your code to this:
$(document).ready(function() {
window.myFunction = function(){ //you should make myFunction avaliable in global
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
}
})

Function stops after click()

I'm trying to simulate two click to open a menu. The first one opens the menu and the second the submenu but after the first click() the function stops.
This is my JS code:
function open_menu(id_menu, id_sub_menu) {
$('.sous-domaines a#lien-domaine-'+id_menu).click();
$('a#lien-menu-'+id_sub_menu).click();
}
I call my function in HTML with this code:
<span onClick="open_menu('0', '116')">Open sub-menu</span>

You're doing it too fast maybe.
Wrap the second one in a window.setTimeout()

can you do something like this ? set a bool after first click
var IsClick = false;
function open_menu(id_menu, id_sub_menu) {
$('.sous-domaines a#lien-domaine-'+id_menu).click();
if (IsClick){ fnSecondClick();}
}
function fnSecondClick() {
//open submenu
}
or something like this - on click check if menu is visible:
function open_menu(id_menu, id_sub_menu) {
$('.sous-domaines a#lien-domaine-'+id_menu).click();
if ($(element).is(":visible")){ fnSecondClick();}
}

Well you can give this a try, it is pretty much waht you had, other than the fact i don't have menu open somewhere
http://jsfiddle.net/tRg3e/2/
I think the .click() only works if you have a handler attached, it does not trigger the native click on the element.. I tried it without handler and the link does not go

You should stray away from 'onClick' declared in elements like that, it's bad practice if I do recall. Nonetheless, it still works.
If you could provide some HTML code it would help clarify the idea but you could set a trigger event for example:
http://jsfiddle.net/wrN2u/3/
EDIT: With a toggle - http://jsfiddle.net/wrN2u/18/

jQuery ready block hiding code outline in IDE

When I write the following code, whether Im using Aptana, Dreamweaver or Eclipse, I can never see functions in the onready block in the outline view:
$(document).ready(function(){
function myFunction(){
}
function myFunction2(){
}
});
Basically the only thing I see in outline is the onready and I have to remove the onready if I want to see all my functions. What technique or way of handling this situation can I try to both see all the functions in outline view and still use onready?

What technique or way of handling this situation can I try to both see
all the functions in outline view and still use onready?
Just don't define your own functions inside like you demostrated. It's unnecessary. Have your functions defined outside like so:
function myFunction(){
}
function myFunction2(){
}
$(document).ready(function() {
myFunction();
myFunction2();
});

A simpler way to do the onready is:
$(function(){
... code here ...
})
Maybe this will solve your problem...