How to call a click( ) attribute?

Question

function dosomething(){
    alert($(this).attr('id')+' called with '+$(this).innerHTML);
}
$('#myElement').click(dosomething);

here is the HTML:

<div id="myElement">click me</div>

Clicking the element works. But the following call from another location does not:

dosomething($('#myElement'));

Working with objects in Javascript is still frustrating to me. Can anyone explain WHY #2 doesn't work, and an elegant way to handle both cases? here is a jsfiddle for reference:

http://jsfiddle.net/sqb6bkwr/

@Travesty3 Not to be an ass, but mine is better by 0.00000001ms :) — Karl-André Gagnon, Sep 24 '14 at 19:48
possible duplicate of [How to trigger a click on a link using jQuery](http://stackoverflow.com/questions/5811122/how-to-trigger-a-click-on-a-link-using-jquery) — Huangism, Sep 24 '14 at 19:50

Bjorn · Answer 1 · 2014-09-24T20:26:00.637

3

Your function dosomething() does not accept any arguments. Therefor it will not work. You can choose to use $('#myElemenet').trigger('click');, ~~or choose to have your function accept an argument which sets the element:~~

function dosomething(el) {
    el = (el) ? el : $(this);
    alert(el.attr('id')+' called with '+el.innerHTML);
}

// My suggestion won't work.
// Use dosomething.call(el) instead.

edited Sep 24 '14 at 20:26

answered Sep 24 '14 at 19:48

Bjorn

5,272
1
24
35

1

That will not work because `el` when physically clicking the element will be the event. so `el.attr()` will throw `undefined is not a function`. – Karl-André Gagnon Sep 24 '14 at 19:54
@Karl-AndréGagnon I stand corrected :-). In that case I'd go with `.call()` as suggested by Zenorbi. – Bjorn Sep 24 '14 at 20:00

score 2 · Accepted Answer · edited Sep 24 '14 at 19:58

dosomething($('#myElement'));

This doesn't work because the function dosomething() is not expecting the element to be taken in as the first parameter, and passing it as a parameter does not automatically set it as this.

The way you should call that method depends on your intended behavior. If what you want is to just call that dosomething function on that element, then you can do this:

dosomething.call($('#myElement')[0]);

But if your objective is to simulate a click on that element, which would trigger any other click event listeners that may be on that element, then you should do this:

$('#myElement').click();
// or, as @Karl-AndréGagnon pointed out, $('#myElement').trigger('click');

The difference may seem small, but knowing what you really want to happen will probably save you from some headaches down the road.

score 1 · Answer 3 · answered Sep 24 '14 at 19:49

This is because the this value of your function was not set. You pass an argument to your function, but expect the this value to be the argument.

You should instead call that like this: dosomething.call($("#myelement")[0]);

This will call the function with the this value of the #myelement. The [0] is there because you want the native DOM element, not a jQuery array-like object. This is why you wrap the this in $(this) in your function.

score 0 · Answer 4 · answered Sep 24 '14 at 19:50

Try this:

var domething;
$(document).ready(function(){
dosomething = function(elem){
    alert(elem.attr('id')+' called with '+elem.attr('title'));
}
$('#myElement').click(function(){
  dosomething($(this));
});
});

How to call a click( ) attribute?

4 Answers4

Working fiddle: http://jsfiddle.net/robertrozas/3z0pg9b1/1/