Question

I have an ajax function (not sure if relevant) that updates html and creates a few links:

<a href="#" class="clickme" onclick="column_click()" title="my title">click me</a>

I’m not sure why, but onclick, if I alert $(this).attr('title') it shows as undefined, and if I alert $(this) it shows [window]

     function column_click(){
            value = $(this);
            console.log(value);

            thetitle= $(this).attr('title');
            console.log(thetitle);
        }

Does anyone know why this is the case?

Answer 1

You’re confusing the obtrusive and unobtrusive styles of JS/jQuery event handling. In the unobtrusive style, you set up click handlers in the JavaScript itself, rather than in an onclick attribute:

$('.clickme').on('click', column_click);

The above will automatically bind this to the clicked element while the event is being handled.

However, this is not standard JavaScript! It’s a feature of jQuery. The on method is smart enough to bind the function to the HTML element when it handles the event. onclick="column_click" doesn’t do this, because it isn’t jQuery. It uses standard JS behavior, which is to bind this to the global object window by default.

By the way, the reason you see [window] is that $(this) has wrapped window in a jQuery object, so it looks like an array with the window object inside it.

There are three main ways to deal with your problem:

1. Use unobtrusive binding: $('.clickme').on('click', column_click); in a script at the end of the page, or somewhere in the $(document).ready handler
2. Bind this manually: onclick="column_click.call(this)"

3. Avoid using this at all:

   function column_click(e) {
       var value = $(e.target);
       //...
   

Of these, I’d strongly recommend either 1 or 3 for the sake of good coding.