Develop Reference

jquery pass a custom function to click event does not work

This may be a stupid question but I'd like to get some clarification on the matter. I have a function that loops through an array and copies values from input A to input AA (B to BB, and so on). But I want this function to execute when a hidden div is visible only. So I was trying to do this:
$('#showSave').on('click', function () {
copyInputValues();
$('#divModal').css('display', 'block');
});
Then I also tried this to no avail:
$('#showSave').click(copyInputValues);
This is my custom function:
function copyInputValues() {
var minInputs = ['abel1', 'abel2', 'abel3', 'abel4'];
$.each(minInputs, function (i, val) {
$('#l' + val).change(function () {
$('#modalL' + val).val($(this).val());
});
});
}
What is wrong with these scripts? I'm not very versed on javascript or jquery. I'm kinda learning and I've found stackOverflow to be a great source of information.
Thanks again for your help!

You can use
if ($('#divModal').css('display') == 'block') {
copyInputValues();
}
OR
if (!$("#divModal").css('visibility') === 'hidden') {
copyInputValues();
}
OR
if($('#divModal').is(':visible')) {
copyInputValues();
}

Defining generic function jquery

I have a simple function that shows a div when the user clicks on a given checkbox. I'd like to have the same behaviour on another checkbox, so that's why I'd like to generalize it as a function passing the element to be shown.
But I'm not aware of the syntax on Jquery to do so. And it's triggering automatically when the page loads. Does anybody has an idea?
Code:
$(document).ready(function() {
$("#transcricao").change(
function(){
if ($('.form_transcr').css('display') === 'none') {
$('.form_transcr').fadeIn();
} else {
$('.form_transcr').fadeOut();
}
}
); //This is working fine!
$("#traducao").change( show_hide($('.form_trad')) );
//This is auto-trigerring without user action...
});
Here's my function:
function show_hide($elm){
//This is the "generalized" function that I'd like to use on both
//checkboxes, just passing the element.
if ($($elm).css('display') === 'none') {
$($elm).fadeIn();
} else {
$($elm).fadeOut();
}
}

Its auto-triggering without user action because you are invoking it.
Use
$("#traducao").change(function () {
show_hide($('.form_trad'));
});
As you are passing jQuery object so use it directly
function show_hide($elm) {
//This is the "generalized" function that I'd like to use on both
//checkboxes, just passing the element.
if ($elm.css('display') === 'none') {
$elm.fadeIn();
} else {
$elm.fadeOut();
}
}

The argument to .change() should be a function. You're not passing a function, you're calling the function.
$("#traducao").change(function() {
show_hide($('.form_trad'));
} );
BTW, your show_hide function seems to be equivalent to jQuery's fadeToggle method, so it can be:
$("#traducao").change(function() {
$(".form_trad").fadeToggle();
});

Minimize click()

$(this).click(function() {
clicked($(this));
});
How do I minimize this code to one line?
Tried this - doesn't work:
$(this).click(clicked(this));
It will be used then like this:
function clicked(element) {
element.css('...');
// some other code
}

You can pass the clicked function directly:
$(this).click(clicked);
but you'll need to change your clicked function to wrap the element.
function clicked() {
$(this).do("whatever")
}
Regarding your updated question, you can have clicked return a function if you want.
function clicked(element) {
return function() {
element.css('...');
// some other code
}
}
So then you can do this:
$(this).click(clicked($(this)));
But I'd personally change your clicked function to work like the first version.

jQuery - Create new function on event

In JavaScript/jQuery, if I want to have a function that can run on an element that has been appended to the DOM, it has to be created after the element has been appended to the DOM. How can I do this? I heard one can do this with the jQuery .on() function, but I'm not quite sure how.
HTML:
<span>Hello Stackoverflow</span>​
JavaScript:
$("span").click(function () {
addMyElement();
});
$("p").click(function () {
removeMyElement(this);
});
function addMyElement() {
$("<p>Hello World</p>").appendTo("body");
}
function removeMyElement(myElement) {
$(myElement).remove();
}
Example on jsFiddle.net.

This is called delegated-events approach and it works as follows:
$("body").on("click", "p", function () {
// ...
});
Instead of body you can use any parent element of p.
DEMO: http://jsfiddle.net/wWXrK/6/

function addMyElement() {
$("<p>Hello World</p>").appendTo("body").click(function () {
removeMyElement(this);
});
}
Will work for you, not hugely readable with all that chaining though.

How to call javascript function with parameter in jquery event handler?

I am stuck. Searched and tried for hours.
EDIT:
I still can't make it work. Okay, I'll just put the source code to make it clear what I want to accomplish.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
var date_fmt="yyyy-mm-dd";
var time_fmt="HH:MM";
var date_field="#id_start_0, #id_end_0"; //id refering to html input type='text'
var time_field="#id_start_1, #id_end_1"; //id refereing to html input type='text'
function clearFmt(fmt_type)
{
if($(this).val() == fmt_type) {
$(this).val("");
}
}
function putFmt(fmt_type)
{
if($(this).val() == "") {
$(this).val(fmt_type);
}
}
$(document).ready(function() {
$(date_field).attr("title",date_fmt);
$(time_field).attr("title",time_fmt);
$(date_field).click(function() {
clearFmt(date_fmt);
});
$(date_field).blur(function(){
putFmt(date_fmt);
});
$(time_field).click(function(){
clearFmt(time_fmt);
});
$(time_field).blur(function(){
putFmt(time_fmt);
});
});
</script>
Help ?

Use the jquery bind method:
function myfunc(param) {
alert(param.data.key);
}
$(document).ready( function() {
$("#foo").bind('click', { key: 'value' }, myfunc);
});
Also see my jsfiddle.
=== UPDATE ===
since jquery 1.4.3 you also can use:
function myfunc(param) {
alert(param.data.key);
}
$(document).ready( function() {
$("#foo").click({ key: 'value' }, myfunc);
});
Also see my second jsfiddle.
=== UPDATE 2 ===
Each function has his own this. After calling clearFmt in this function this is no longer the clicked element. I have two similar solutions:
In your functions add a parameter called e.g. element and replace $(this) with element.
function clearFmt(element, fmt_type) {
if (element.val() == fmt_type) {
element.val("");
}
}
Calling the function you have to add the parameter $(this).
$(date_field).click(function() {
clearFmt($(this), date_fmt);
});
Also see my third jsfiddle.
-=-
An alternative:
function clearFmt(o) {
if ($(o.currentTarget).val() == o.data.fmt_type) {
$(o.currentTarget).val("");
}
}
$(date_field).click({fmt_type: date_fmt}, clearFmt);
Also see my fourth jsfiddle.

The following should work as seen in this live demo:
function myfunc(bar) {
alert(bar);
}
$(function() {
$("#foo").click( function() {
myfunc("value");
});
});

anyFunctionName = (function()
{
function yourFunctionName1()
{
//your code here
}
function yourFunctionName2(parameter1, param2)
{
//your code here
}
return
{
yourFunctionName1:yourFunctionName1,
yourFunctionName2:yourFunctionName2
}
})();
$document.ready(function()
{
anyFunctionName.yourFunctionName1();
anyFunctionName.yourFunctionName2();
});
Note: if you don't use 'anyFuctionName' to declare any function then no need return method. just write your function simply like, yourFunctionName1().
in $document.ready section parameter is not issue. you just put your function name here. if you use 'anyFuctionName' function then you have to follow above format.

function myfunc(e) {
alert(e.data.bar); //this is set to "value"
}
$("#foo").click({bar: "value"}, myfunc);

People are making this complicated, simply call directly as you would in Javascript
myfunc("value");