JQuery using THIS as a .on [selector]

Question

Hi, So i've got this code:

$(document).on('click', ".buttonSelectAllOpt", function () {
    alert(this.attr("id"));
});

and PHP:

$iii=1
while([...]){
echo "<span class=\"buttonSelectAllOpt\" id=\"buttonSelectAllOpt$iii\">Some text</span>";
$iii++;
}

I want THIS to be .buttonSelectAllOpt, but it seems that THIS reffers to document, and not to selector. Do You know if I can somehow call the selector?

You should not be registering a click event on your entire document. This means that anytime something is clicked in the entire document, your event will be fired. Instead just do `$('a.buttonSelectAllOpt').on('click', function() {` etc... — user1477388, Sep 16 '15 at 19:03
@user1477388 You didn't read the post, or you don't understand arguments of the function; the second argument means: select only items with class="buttonSelectAllOpt" — , Sep 18 '15 at 18:34
I understand how it works. I am saying instead of setting the event on the document, you should do like `$('a.buttonSelectAllOpt').on('click', function() {` because it's more efficient. Have you seen the jQuery source code? https://github.com/jquery/jquery/blob/master/src/event.js — user1477388, Sep 18 '15 at 21:06
You see, it won't work, because buttonSelectAllOpt is loading through ajax. Jquery loads selector only when the page is loaded, and .on changes it dynamically, as far as i'm concerned — , Sep 18 '15 at 23:24
On should be dynamic as it was implemented to replace `.live()` I believe. However, should you need to re-register the event handler, you can always do so simply by placing it in a function and then calling the function on the complete of your AJAX. See my answer below. — user1477388, Sep 20 '15 at 12:17

score 2 · Accepted Answer · answered Sep 16 '15 at 18:45

2

this in your example will refer to the .buttonSelectAllOpt element which was clicked, however you need to wrap it in a jQuery object to access the attr() method. Try this:

$(document).on('click', ".buttonSelectAllOpt", function () {
    alert($(this).attr("id"));
});

Example fiddle

answered Sep 16 '15 at 18:45

Rory McCrossan

331,213
40
305
339

thanks! it worked. I didn't know i can use `$(this)` , i thought i could only use this ;) – Sep 16 '15 at 19:00

samlev · Answer 2 · 2015-09-16T18:52:51.713

1

this will refer to the item that was selected, so try selecting the actual element:

$('.buttonSelectAllOpt').click(function () {
    alert($(this).attr("id"));
});

Also note that .click is a preferred shorthand for .on('click'). Attaching the event to the actual object (instead of the document) is also faster.

See this JSFiddle.

edited Sep 16 '15 at 18:52

answered Sep 16 '15 at 18:43

samlev

5,852
1
26
38

Note that the OP is using a delegated event handler, and also that DOMElements do not have an `attr()` method. – Rory McCrossan Sep 16 '15 at 18:47
I use ajax to add this divs, so i have to use .on – Sep 16 '15 at 18:57
Ahh ok. I suppose that makes sense, then. – samlev Sep 16 '15 at 18:59

score 0 · Answer 3 · answered Sep 16 '15 at 18:54

0

Use either this.id or $(this).attr('id'). Inside event handlers, this is a DOM element, so you can access its properties directly. If you want to use the jQuery .attr() method, you need to wrap it in a jQuery object.

answered Sep 16 '15 at 18:54

Barmar

741,623
53
500
612

score 0 · Answer 4 · answered Sep 20 '15 at 12:16

Here's an alternative answer so that you don't need to register an event with the document itself...

Try creating a method like this:

var initBtnHandler = function () {
    $('a.buttonSelectAllOpt').on('click', function() {
        alert($(this).attr('id'));
    });
}

Then, on the complete of your AJAX, simply re-register the event by calling the function:

$.ajax({
    url: 'yourUrl',
    type: 'post',
    success: function () {
        // do something
    },
    complete: function() {
        initBtnHandler();
    }
});

Now, your new items will be registered with the event handler.

Oh, that's an idea, but it does the same, so there is no need to change my code — , Sep 20 '15 at 13:56

JQuery using THIS as a .on [selector]

4 Answers4