Question

75

Object has no method 'apply'

rated 0 times [ 80] [ 5] / answers: 1 / hits: 15321 / 12 Years ago, thu, july 26, 2012, 12:00:00

I am creating a few DOM elements dynamically like,

var anchorElement = jQuery('<a />',{text:property.text});

var liElement = jQuery('<li />',{class:navlink_+i,id:navlink_+i});

anchorElement.on('click',property.fnctn);

liElement.append(anchorElement);

parentID.append(liElement);

Where property is a JSON object.
property.text is the text that I want to put into anchor element. (Works fine)

I want to attach a click event handler to that anchor element.
The function that needs to be bound to that element is specified in JSON and we can access it like

property.fnctn

The following line should bind the event handler to the anchor element.

anchorElement.on('click',property.fnctn);

This was not working so I tried converting it into string like,

anchorElement.on('click',property.fnctn.toString());

No Success...

When I click on this link, the error is logged in the console

The object has no method 'apply'.
What is the reason...???

I am able to get it working with a slight work around like

anchorElement.attr('onclick',property.fnctn+());

Above statement works, but I want to know why .on() API is not working.

Thanks :)
AÐitya.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

khalidkendelld

Add To Favorites

Follow

Total Points: 55

Total Questions: 99

Total Answers: 77

Location: South Korea

Member since Tue, Feb 22, 2022

2 Years ago

khalidkendelld questions

1 How do I display the variant image when the color swatch of a variant is hovered on Shopify?

Mon, Apr 20, 20, 00:00, 4 Years ago

1 CryptoJS AES encryption with ECB mode produces different results with the same params

Sun, Apr 5, 20, 00:00, 4 Years ago

1 How to add edit and delete buttons in datatable

Wed, Feb 26, 20, 00:00, 4 Years ago

1 Import a Nest.js app as a simple Express middleware

Sun, Feb 16, 20, 00:00, 4 Years ago

1 How to create chartjs chart with data from database C#

Tue, Nov 12, 19, 00:00, 5 Years ago

View All

answered 12 Years ago alonso · Accepted Answer

Update:

Youve said that property.actfn is a string, paySomeoneClick. It's best not to use strings for event handlers, use functions instead. If you want the function paySomeoneClick, defined in the string, to be called, and if that function is global, you can do this:

anchorElement.on('click',function(event) {

    return window[property.fnctn](event);

});

That works because global functions are properties of the global object, which is available via window on browsers, and because of the bracketed notation described below.

If the function is on an object you have a reference to, then:

anchorElement.on('click',function(event) {

    return theObject[property.fnctn](event);

});

That works because in JavaScript, you can access properties of objects in two ways: Dotted notation with a literal property name (foo.bar accesses the bar propety on foo) and bracketed notation with a string property name (foo[bar]). They're equivalent, except of course in the bracketed notation, the string can be the result of an expression, including coming from a property value like property.fnctn.

But I would recommend stepping back and refactoring a bit so you're not passing function names around in strings. Sometimes it's the right answer, but in my experience, not often. :-)

Original answer:

(This assumed that property.fnctn was a function, not a string. But may be of some use to someone...)

The code

anchorElement.on('click',property.fnctn);

will attach the function to the event, but during the call to the function, this will refer to the DOM element, not to your property object.

To get around that, use jQuery's $.proxy:

anchorElement.on('click',$.proxy(property.fnctn, property));

...or ES5's Function#bind:

anchorElement.on('click',property.fnctn.bind(property));

...or a closure:

anchorElement.on('click',function(event) {

    return property.fnctn(event);

});