Develop Reference

jQuery $(this) not working when inside a function

I have this simple function that copies some html, and places it in another div.
If I put the code for the function in the click event it works fine, but when I move it into a function (to be used in multiple places) it no longer works.
Do you know why this is?
If I console.log($(this)); in the function it returns the window element.
function addHTMLtoComponent () {
var wrapper = $(this).closest(".wrapper");
var component = $(wrapper).find(".component");
var componentCodeHolder = $(wrapper).find('.target');
$(componentCodeHolder).text(component.html())
//console.log($(this));
}
$(".js_show_html").click(function () {
addHTMLtoComponent();
});
codepen here - http://codepen.io/ashconnolly/pen/ebe7a5a45f2c5bbe58734411b03e180e
Should i be referencing $(this) in a different way?

Regarding other answers, i need to put the easiest one:
$(".js_show_html").click(addHTMLtoComponent);

since you called the function manually the function doesn't know the "this" context, therefore it reverted back to use the window object.
$(".js_show_html").click(function () {
addHTMLtoComponent();
});
// Change to this
$(".js_show_html").click(function () {
// the call function allows you to call the function with the specific context
addHTMLtoComponent.call(this);
});
Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

this in the context of the click() event is the element clicked. In the context of the function addHTMLtoComponent this no longer is a reference to the element clicked.
Try passing the clicked object to the function to maintain the object reference.
function addHTMLtoComponent ($obj) {
var $wrapper = $obj.closest(".wrapper");
var $component = $wrapper.find(".component");
var $componentCodeHolder = $wrapper.find('.target');
$componentCodeHolder.text($component.html());
}
$(".js_show_html").click(function () {
addHTMLtoComponent($(this));
});

The special keyword this, when you call a function by itself, is the window object (which is what you observed). For the behavior you need, just add a parameter to the function that loads the appropriate context:
function addHTMLtoComponent(context) {
var wrapper = $(context).closest(".wrapper");
var component = $(wrapper).find(".component");
var componentCodeHolder = $(wrapper).find('.target');
$(componentCodeHolder).text(component.html())
//console.log($(context));
}
$(".js_show_html").click(function() {
addHTMLtoComponent(this);
});

One thing you could consider is that addHTMLtoComponent() could be made into a jQuery function itself:
$.fn.addHTMLtoComponent = function() {
return this.each(function() {
var wrapper = $(this).closest(".wrapper");
var component = $(wrapper).find(".component");
var componentCodeHolder = $(wrapper).find('.target');
componentCodeHolder.text(component.html())
});
}
Now you can call it like any other jQuery method:
$(".js_show_html").click(function () {
$(this).addHTMLtoComponent();
});
The value of this in a jQuery method will be the jQuery object itself, so you don't need to re-wrap it with $(). By convention (and when it makes sense), jQuery methods operate on all elements referred to by the root object, and they return that object for further chained operations. That's what the outer return this.each() construction does.
Inside the .each() callback, you've got a typical jQuery callback situation, with this being set successively to each member of the outer jQuery object.

You have to pass the element as parameter to this function.
eg:
<div onclick="addHTMLtoComponent ($(this))"></div>

How to get selector's variable on Onclick

When a selector is assigned to a variable, I need to get that variable name on onclick I have created a Fiddle as an example
var $main_img1 = $("<div/>").addClass('add1').appendTo($('#main_container'));
var $main_img2 = $("<div/>").addClass('add2').appendTo($('#main_container'));
$main_img1.click(function()
{
get_id()
});
$main_img2.click(function()
{
get_id()
});
function get_id(event)
{
console.log($(this))
alert('i need to get selector variable on click')
}
Output should be $main_img1 and $main_img2 when I click on the corresponding div

Here is a solution, but not sure how you are going to use it
Used Array to get the variable name.
JS
var arr = new Array();
arr[0] = '$main_img1';
arr[1] = '$main_img2';
var $main_img1 = $("<div/>").addClass('add1 add').appendTo($('#main_container'));
var $main_img2 = $("<div/>").addClass('add2 add').appendTo($('#main_container'));
$main_img1.click(function()
{
get_id($(this))
});
$main_img2.click(function()
{
get_id($(this))
});
function get_id(event)
{
alert(arr[$('.add').index(event)]);
}
Update : No array needed.
function get_id(event)
{
///var temp = '$main_img' + (parseInt($('.add').index(event)) + 1);
var temp = '$main_img' + (parseInt($('#main_container > div').index(event)) + 1);
alert(temp);
console.log(eval(temp));
}
Updated DEMO

I suggest a workaround.. see if it helps you. Add a hidden element inside the corresponding divs and add the variable names as text to it. I slightly modified your method get_id() to get the variable name from your divs hidden element.
function get_id()
{
console.log($(this))
var selVar= $(this).parent().find('input:hidden:first').text();
alert('selector variable' + selVar);
}
this will work for you.

You could maybe guessing from the class of the element you click on it and use reflexivity.
To know the element you click on it, just use event.target where event is a variable passed in the click function. Look at this fiddle for an example.
The get_id method now looks like this:
function get_id(event) {
console.log(event.target)
}
The value returned by event.target is the same as the value returned by the variable you declare it ($main_img1 or $main_img2).

Is there a way to create a function that can be either a click event or an onload event, depending on the class of the body?

Basically the Title states the question, but the situation is this (it's difficult to replicate with jsbin or anything else, so I'm going to try to solve without doing that).
I have a function that is called on the click of a button. The click event will tell the output what font will be used. However, on certain pages, I want the font to be declared by the class of the body element and not on the click of a button.
I'm running into two problems.
When I try to pass an argument and receive a parameter, the parameter is an event, rather than whatever I want to pass.
If I pass the event as the first parameter and the font I want as the second, I get undefined as my font variable and the function does not work.
Any help on making a function be flexible in this way would help me out a lot.
Edit: Here's a simplified version of what I've got
function fontSelection(font) {
var self = $(this),
inputOne = $('li:eq(0) input').val(),
inputTwo = $('li:eq(1) input').val(),
inputThree = $('li:eq(2) input').val(),
resultOne = $('div:eq(0)'),
resultTwo = $('div:eq(1)'),
resultThree = $('div:eq(2)');
font = font || $('div.font').attr('title').toLowerCase();
resultOne.removeClass().addClass(inputOne + ' someclass ' + font);
resultTwo.removeClass().addClass(inputTwo + ' someclass ' + font);
resultThree.removeClass().addClass(inputThree + ' someclass ' + font);
}

Rather than pass your function directly to the event registration, you pass an anonymous function that then calls your function with the desired arguments.
So, rather than this:
$("#myButton").click(callMyFunction);
You use this which allows you to specify the exact arguments you want:
$("#myButton").click(function(e) {
callMyFunction(myParam1, myParam2);
});
If you want to preserve, the value of this in your function, then you need to use .call() like this to explicitly set it appropriately in your function:
$("#myButton").click(function(e) {
fontSelection.call(this, myParam1, myParam2);
});
Or, just pass it as an argument and use the argument in your function instead of this:
$("#myButton").click(function(e) {
fontSelection(this, myParam1, myParam2);
});

Try this on for size: A function that, if given an argument, sets the font to be used. If the argument is not set, then reads the body tag for a font.

$(function () {
if ($('body').hasClass('your class for onload change')) {
// change font
} else {
$('button').click(your_function);
}
});
Edit:
if you want to use this in your function and want it to reference on body in first case and some another dom element in second case, you can use call or apply
$(function () {
if ($('body').hasClass('your class for onload change')) {
fontSelection.apply($('body').get(0), [font]);
} else {
$('button').click(function () {
fontSelection.apply(this, [font]);
});
}
});

jQuery global selection "cache"

I don't think I'm the first one to run into this issue but I haven't find a way to search for this without getting results that have nothing to do with the issue.
I adopted the not so extended good practice of "caching" repetitive jQuery selections into vars like var element = $('#element'); to prevent "DOM pool searching" for every repeated use of the element
The problem I'm having is that now I'm doing this caching inside a function. Something like:
function functionname (id) {
var id = $('#'+id);
//extra stuff
}
I'm not expert in variables scopes but I'm not being able to do
functionname ('some-div-id');
some-div-id.dialog('open');
So I'm pretty sure it's because the variable created inside the function is not accesible outside the function itself.
Then I came up with
function functionname (id) {
window.id = $('#'+id);
//extra stuff
}
but if I try to do window.some-div-id.dialog('open'); I get TypeError: 'undefined' is not a function
What am I missing? I'm sure it's a small dumb thing but I'm missing it just in front of my eyes.
Thanks
EDIT
Thanks everyone but you're missing something.
The code suggestions are missing the fact that the inside "global" variable name is dynamic:
var CACHEobject = {};
function doSomething (NAMEHERE) { //note the function parameter
CACHEobject.NAMEHERE = $('#'+NAMEHERE);
}
So the idea is that the function creates a javascript variable with the same name that the #element_id. If I pass a name to the function it should select the html id with that name and "cache it" to a global variable with the same name:
doSomething('myDialogOne'); doSomething('myDialogTwo');
so I can later do
CACHEobject.myDialogOne.dialog('open'); CACHEobject.myBox.dialog('close');

This is what you want (based off the edit):
var CACHEobject = {};
function doSomething(id) {
CACHEobject[id] = $('#' + id);
}

Your idea is fine. Just set up an object for that. Here's an example using STASH as the caching object:
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var STASH = {};
$(document).ready(function(){
// stash your elements
STASH.item = $('#item');
STASH.otherItem = $('#otherItem');
// do stuff to them
STASH.item.css({
color: '#f00'
}); // sets #item to red
alert(STASH.otherItem.text()); // alerts foo
});
</script>
<style></style>
<body>
<div id="item">bar</div>
<div id="otherItem">foo</div>
</body>
</html>

window.some-div-id.dialog('open');
is interpreted as:
window.some - div - id.dialog('open');
i.e. subtracting, which causes three undefined variables, one of which is id.dialog which causes an error when trying to be executed as a function.
For special characters, use:
window["some-div-id"].dialog('open');
And to define:
window[id] = $("#" + id);
Anyhow, I would not advise you to use global variables. You'd better overwrite the jQuery function to implement caching (using an object with the selector as key and the matched element as value).

You could just declare the variable outside the function.
var $foo;
function some_function(id) {
$foo = $('#' + id);
}

function setDialog(selector) {
window.$dialogElem = $(selector);
//window.dialogSelector = selector;
}
var id= 'mensajes';
setDialog('#'+id);
window.$dialogElem.dialog();
//$(window.dialogSelector).dialog();
commented stuff is an alternative that takes less memory. But why the hell use window?? check this fiddle for various simple techniques.

javascript object in anonymous function tag trigger

i have made an tag trigger function inside an anonymous function , here it is :
(function(){
var getElement = {
getElem: function(element , elemInterval){
if(document.getElementsByTagName('div')[0].onload){
element = document.getElementsByTagName('div')[0];
clearInterval(elemInterval);
element.innerHTML = ' content changed. ';
}
}
}
var element , elemInterval;
elemInterval = setInterval(getElement.getElem(element , elemInterval) , 1000);
})();
what it got to do is to call a function as many time as it needs every one second and check if the first div as been loaded , than it save the element port to the "element" var and change the content of the div.
this seems to not work , what's the problem here?

You're calling it directly and passing the result value to setInterval, which is undefined.
What you probably want is passing a function to setInterval, which in turn will call getElem:
elemInterval = setInterval(function() {
getElement.getElem(element , elemInterval);
}, 1000);

You call the function immediately and pass undefined (its return value) as the first argument of setInterval. Learn how closures work.
elemInterval = setInterval(function() {
getElement.getElem(element , elemInterval);
}, 1000);

The problem is most likely that of scope - the getElem function is contained in a var, which is contained in the function block (which has a scope of its own as well). Interval functions need to be accessible in the global scope.
I'm not able to test this right now, but iirc, this would work:
var something = (function(){
var getElement = {
getElem: function(element , elemInterval){
if(document.getElementsByTagName('div')[0].onload){
element = document.getElementsByTagName('div')[0];
clearInterval(elemInterval);
element.innerHTML = ' content changed. ';
}
}
}
var element , elemInterval;
elemInterval = setInterval(something.getElement.getElem(element , elemInterval) , 1000);
return getElement;
})();
But that's a high level of indirection, you might want to avoid containing your function in another nested function.