Javascript/jQuery object coding issue - javascript

So I have a newly created Javascript object called EditableObject in my custom .js file
function EditableObject(e, dv, i) {
this.element = e;
this.default_value = dv;
this.set = 0;
this.id = i;
alert(this.element.html());
this.element.click(function (event) {
alert(this.element.html());
});
}
In my main page, I have a div called "field" that has the text "yeah" in it like such:
<div id="field">yeah</div>
In the script portion of my main page, I've got:
var t = new EditableObject($("#field"), "value", 1);
When the page loads, there is an alert box that says "yeah". But when I click on the div, I get an error saying that "this.element is undefined". Why is this happening?

Inside your click handler, this refers to a different scope (depending on browser, it'll be the event object or the current function). You need a closure to access parent scope's this:
var self = this;
this.element.click(function (event) {
alert(self.element.html());
});

The thing with this is that it differs in each function depending on the context. In jQuery bind functions, it is the element itself so the most straight-forward solution is:
this.element.click(function (event) {
alert($(this).html());
// this is element, $(this) is jQuery object containing element
});
So currently, this refers to the element, which differs from e.g. the line
this.id = i;
where it refers to the instance of EditableObject, because there you use this in a different function.

The this in your click function refers only to the click itself. I believe you can use
e.html();
there instead

this inside of your click handler refers to the DOM object, not the instance of EditableObject.
You could modify it like this:
this.element.click(function (event) {
alert($(this).html());
});

Related

getting the element's id from on click with (this)

To initiate the onclick event, I have this
[].forEach.call(btnAddVendorDropDown, (btnAddVendorDropDown) => {
btnAddVendorDropDown.addEventListener('click', onAddVendorDropDownClick, false);
});
The function is
function onAddVendorDropDownClick(e) {
e.preventDefault();
addNewClass(modal, 'is-active');
addNewClass(modalAddVendorDropDown, 'is-active');
const test = $(this).attr('id');
console.log(test);
return test;
}
So what I'm trying to do is when a user clicks btnAddVendorDropDown, the function onAddVendorDropDownClick is called. I need to grab the id from the element. When I do console.log of the element attribute id from inside the function, I get exactly what I need. The problem I'm running into is when I try to grab it from outside the function, I keep getting undefined. I don't understand how I can grab the id once it calls this function from outside this function.
I tried this
var num = onAddVendorDropDownClick();
console.log("the function return is " + num);
Which is what shows undefined.
this is related directly to the caller's scope. This means that without "binding" a scope to your event handler, this is going to refer to your main application scope, and not the scope that jquery passes as you chain functions.
You can either wrap the event object's target:
function onClickHandler(e) {
$(e.target).attr('id');
}
Or you can use $(this) within the jquery context of a click handler:
$('#my-button').on('click', function(e) {
$(this).attr('id');
});
The last example works because it is occurring inside a JQuery closure, so it retains the scope from the previous function. Outside of a closure, this means something else.
$(this) is JQuery context, and you are inside javascript function. You can change the click button to JQuery to use it:
var test;
$("button").click(function(){
test = $(this).attr('id');
console.log(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnTeste">
Teste
</button>

Jquery Multiple Click Events

I am dynamically creating objects which construct a view and bind events to the constructed view when clicked. However, the click event is always attaching itself to the last created object. I do want to have the same click event for each object, but the data that I am passing to a new class is unique per instance.
Object creation:
$.each(data,function(i,json)
{
var channelWrapper = new ChannelDisplayView(that.channelContainer, json);
that.channelContainer.append(channelWrapper.createView());
});
ChannelDisplayView.js
function ChannelDisplayView(parent, data){
this.parent = parent;
this.data = data;
}
ChannelDisplayView.prototype.createView = function(){
this.channelWrapper = $("<div/>").addClass("channelDisplay").attr("id", this.data.fullName);
this.channelTitle = $("<div/>").addClass("channelTitle").html(this.data.fullName);
this.channelSource = $("<div/>").addClass("sourceType").html(this.data.sourceType);
this.channelWrapper.append(this.channelTitle);
this.channelWrapper.append(this.channelSource);
that = this;
this.channelWrapper.unbind().on("click",function(event){
ControllersSingleton.getInstance().getProgramController().setupPage(that.data);
});
return this.channelWrapper;
}
As you can see each class will hold its own JSON data and this should be used to pass to an instance of another controller if the "div" is clicked. The data being sent no matter what div I click is always from the last created object.
Am I missing something obvious here?
It looks like you have created a global that which on each loop iteration is being overwrote with that = this.
Instead of calling append on that.channelContainer try using the instance you have created like channelWrapper.channelContainer.append.... channelWrapper is scoped to the loop iteration.
You can bind an event handler to your whole document and listen for all events of a certain type, responding with a callback if the event target matches a certain selector. For instance:
$(document).on('click', '.some-class', function(e){
console.log('.some-class element clicked.');
});
That code will listen for any clicks on the document, and if the target matches the selector in the second parameter, it will execute the callback function in the third parameter.
I often find it best to use a method like this when I am dynamically adding elements to the DOM.

How do I get the current HTML element on which the event handler is being called

How do I get a reference to the HTML DOM element inside its event handler that I am wiring up?
var dashboard =
{
WireHandlers : function()
{
$(".approveButton")
.unbind("click")
.click(dashboard.approve)
},
approve : function()
{
// In here, I would like a reference
// to the HTML DOM element that was clicked
// Also, I would like its id
}
}
Simply add an argument to your approve function (typically named event) and call currentTarget on it:
approve : function(event) {
// In here, I would like a reference
// to the HTML DOM element that was clicked
event.currentTarget
// Also, I would like its id
event.currentTarget.id
}
Note that you can also use this within the approve method to reference the clicked element.
approve : function() {
this // or $(this) if you want to use jQuery
}
Note that in this case target and currentTarget are interchangeable. However, in more complex scenarios, there are important differences between the two.
$(this)
is the jQuery element (this is the DOM element)
this will not be bound to dashboard (as you're just providing the function as a callback, you'll have to use eg dashboard.WireHandlers)
From the jquery documentation here:
https://api.jquery.com/click/
you can access the acted upon element through the "this" variable:
approve : function()
{
var elem = this;
var id = elem.id;
}

The correct way to bind this?

I'm trying to access 'this' inside a method that is called from a button press, where this refers to both the class and the button pressed:
p.myVar = 'banana';
$('.go').on('click', this._init);
p._init = function(e){
//get the button pressed
//get this.myVar
};
To do this I bind this:
$('.go').on('click', this._init.bind(this));
The above works and I can now access my var via:
this.myVar; //banana
But I can no longer access the button.
How can I access it, use e.currentTarget or is there a better way?
You should use the data argument :
$('.go').on('click', {myVar:'banana'}, this._init);
p._init = function(e){
// use e.data.myVar;
// this is the right matching clicked element
};
I presume your declaring the event listener in a closure, if so you can use a local variable and pass it that, the reference is unique to the closure and can be accessed by the function in the listener when it is called. It becomes a kind of invisible global, the reference only exists to that specific call and the listener function but is still shared.
function initButtons(){
var selfRef = this;
$('.go').on('click',selfRef._init);
}

How to get a reference to the event's source element

Inside an event listener, I need a reference to the element that was the event source. How do I get that?
This should be a no-brainer for anyone doing JavaScript for some time.
All the functions including the event handler are in global scope, and therefore, implicitly made a part of the DOM window object.
function WireHandlers() {
$('.updateResourceImageButton').click(UpdateResourceLinkClickedHandler);
}
function UpdateResourceLinkClickedHandler() {
// I would like a reference to the hyperlink/anchor
// that was actually clicked, i.e. the hyperlink that
// was the source of this event
// would the keyword 'this' evaluate to the element I need?
// or will it evaluate to the HTML DOM 'window' object
// in this context?
}
$(document).ready(function () { WireHandlers(); });
When you pass the function by reference you still get access to the parameters as normal. As such event.target or this will be the clicked element within the UpdateResourceLinkClickedHandler function:
function UpdateResourceLinkClickedHandler(e) {
// clicked element as a native DOM element
var foo = e.target;
var bar = this;
// jQuery object containing clicked element
var $foo = $(this);
}
Note, both foo and bar in this example will contain the same value.
I think you can do it like this
$(this)
also this is from jquery documentation
var target = $( event.target );
as in this page http://api.jquery.com/event.target/ and look at this article for more information http://www.pkshiu.com/loft/archive/2009/01/understanding-this-this-and-event-in-a-jquery-callback-function

Categories

Resources