plain JavaScript equal to jquery $(this)

Question

I currently have code for jQuery for links. When a link in a selected for is clicked it opens dialog.

$('.dialog_link_add').click(function(){
    var row_id = $(this).parent().parent().attr('id');
    return false;
}

Because dialog always makes window to scroll to the top (in Internet Explorer), i've found solution to this by using plain JavaScript and implementing method the old fasion way.

onclick="function_call(this);return false;"

... but it's not working. How can I now send "this" parameter to be equal to jQuery $(this)?

Answer 1

The answer to the question you actually asked is: The raw equivalent of $(this) is this , but with the form of your given onclick , it would be the argument you pass into your function. You can continue to use jQuery in that function if you like, just accept the element as an argument (because that's how you're passing it) and then use $() on it:

function function_call(elm) {
    var row_id = $(elm).parent().parent().attr('id');
    // ...
}

But to go completely raw DOM::

function function_call(elm) {
    var row_id = elm.parentNode.parentNode.id;
}

More in the various DOM specs and HTML5 API:

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Web Apps APIs

BUT : You can prevent the scroll in your jQuery version in the same way:

 $('.dialog_link_add').click(function(){ var row_id = $(this).parent().parent().attr('id'); return false; // <<============= }); 

In a jQuery handler, return false does two things:

1. Prevent the default action (so in the case of a link in the form # , it doesn't scroll the window).

2. Prevent the event from bubbling up the DOM.

In a DOM0-style handler (your onclick ), return false prevents the default action, but doesn't stop bubbling. More about return false in various types of handlers . (The edited question shows a return false in the jQuery handler that wasn't originally there.)