How to make "this" refer to the element firing the event

Question

I'd like to make "this" refer to the element which is actually firing the event:

<div class="input-group">
    <span class="input-group-addon header-text" id="action-header-text">Action</span>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="action-dropdown" data-toggle="dropdown" aria-expanded="true" style="min-width:250px;">
            <span class=" caret">
            </span>
        </button>
        <ul id="action-menu" class="dropdown-menu" role="menu"></ul>
    </div>
</div>

Filling Ajax Request:

function UpdateActionDropdown() {
    $.ajax({
        url: 'FrontEnd/Action',
        type: 'POST',
        dataType: 'json',
        data: {
            lid: document.getElementById('selected-language-id').value
        },
        success: function (data) {
            document.getElementById('action-dropdown').firstChild.data = data.UnSelectable[0].ActionTrailer.DescriptionText;
            $('#action-menu').html(null);
            for (var i = 0; i < data.UnSelectable.length; i++) {
                $('#action-menu').append("<li role='presentation' class='disabled'><a role='menuitem' tabindex='-1'>" + data.UnSelectable[i].ActionTrailer.DescriptionText + "</a></li>")
            }
            $('#action-menu').append("<li role='presentation' class='divider'></li>");
            for (var i = 0; i < data.Selectable.length; i++) {
                $('#action-menu').append("<li role='presentation'>" +
                    "<a role='menuitem' tabindex='-1' text='" + data.Selectable[i].DescriptionText + "' value='" + data.Selectable[i].ActionTrailer.ID + "'\" href='#'>" + data.Selectable[i].ActionTrailer.DescriptionText + "</a></li>")
            }
        }
    });
}

global listener:

$('.dropdown').on('click', '#action-menu li', function(){
    // Inside here I want to access the li-element which got clicked.
});

I assume that "this" inside the onclick Handler would refer to the document (or window) itself - is it possible to refer to the actual event firing element?

Thanks in advance!

So you just didn't test it?!....??? But this is kind of good question — A. Wolff, May 27 '15 at 09:33
You can get the target element using `target` property in the `event` — Vigneswaran Marimuthu, May 27 '15 at 09:34
@VigneswaranMarimuthu It won't be necessary the LI element and more often it would be one of its children, unlike `event.currentTarget` https://api.jquery.com/event.currentTarget/ — A. Wolff, May 27 '15 at 09:34
you need to do something like this:onclick="click(this)" and in your function something like this function click(arg) — user786, May 27 '15 at 09:35
@Satpal, you have a point. But will this(the javascript version) **always** be the invoking element? — AmmarCSE, May 27 '15 at 09:37
@AmmarCSE of course, `$(this)` is just `this` wrapped in jq object — A. Wolff, May 27 '15 at 09:41

score 10 · Accepted Answer · edited May 23 '17 at 12:29

10

Use $(this) which will be a DOM(in the context of jQuery) element when you are in a callback function

$('.dropdown').on('click', '#action-menu li', function(){
    $(this)// It will be the li element clicked
});

See jQuery: What's the difference between '$(this)' and 'this'? and https://remysharp.com/2007/04/12/jquerys-this-demystified

edited May 23 '17 at 12:29

Community

1
1

answered May 27 '15 at 09:30

AmmarCSE

30,079
5
45
53

I already tested but $(this).value will always be 0 - but none of my li-elements got this value - so I assume that $(this) is refering to the document instead of the
element. Is there any way to prove this?

Th1sD0t

May 27 '15 at 09:40

@Chill-X, use $(this).val() – AmmarCSE May 27 '15 at 09:41

2

`this.value` or `$(this).val()` but not `$(this).value. That's said, LI element has no property value (by default)` – A. Wolff May 27 '15 at 09:42

1

@Chill-X, use $(this).text() – AmmarCSE May 27 '15 at 09:45

@A.Wolff both of the possible notations will result in 0 - the "global listener" lies inside – Th1sD0t May 27 '15 at 09:47

@AmmarCSE seems like .text() works - but why doesn't value return the (self created) value-property? I saved the ID from the Database inside this value-attribute - I really depend on that... – Th1sD0t May 27 '15 at 09:49

@Chill-X How do you check it? Post minimalistic sample showing this behaviour. And `value` isn't valid attribute for LI element, you should use `data-*` instead, e.g: `data-value` even `data-id` seems more relevant – A. Wolff May 27 '15 at 09:50

@A.Wolff Thank you! I've never heard about data-* so I think I have to read a few articles about this before I'm able to continue working on my project. Thanks anyway :) – Th1sD0t May 27 '15 at 09:57

@A.Wolff sorry for using this post again but - more or less it's the same issue - I think. Now I set data-value to contain the database id - but trying to access $(this).data("value").val() results in a null reference exception. – Th1sD0t May 27 '15 at 10:07

1

@Chill-X, I think $(this).data('value') without the .val() will work – AmmarCSE May 27 '15 at 10:09

@AmmarCSE no, alert($(this).data('value')) will return a dialog box containing "undefined". (every

element got a data-value between 1 and 4).

– Th1sD0t May 27 '15 at 10:12

How to make "this" refer to the element firing the event

1 Answers1