jQuery on() - is event.delegateTarget the best way to get the main container of on() function?

Question

I have a HTML similar to this:

<div class="ajax_table_container">
    <table>
        <tr>
            <td><a href="ajax.php?action=delete&id=1" class="delete_element">DELETE</a></td>
        </tr>
        <tr>
            <td><a href="ajax.php?action=delete&id=2" class="delete_element">DELETE</a></td>
        </tr>
    </table>
</div>

And javascript:

$("div.ajax_table_container").on("click", "a.delete_element", function (event) {
    var adr = $(this).attr("href");    
    $(event.delegateTarget).html("TEST");
    return false;
});

In real application I'm reloading contents of the ajax request from the address provided in the link clicked.

My question is though, is the method I'm using the best to get the main div (with class ajax_table_container). I'm talking about the fragment: event.delegateTarget. Is there any better way of getting it in jQuery? (btw. I don't want to use $('div.ajax_table_container') here - there might be a couple of these divs on one page)

FIDDLE

EDIT: After getting some answers and checking google I would like to mark myself as duplicate ;-) Here: How to get parent selector with jquery.on('click'), base on the clicked element

Answer 1

If your goal is to get the element on which you hooked the event, it's not only your best option, but nearly your only option.

Another option, which I'm not advocating, is to remember what you used in a variable that the event handler closes over:

var $container = $("div.ajax_table_container");
$container.on("click", "a.delete_element", function (event) {
    var adr = $(this).attr("href");    
    $container.html("TEST");
    return false;
});

But since jQuery gives you that handy delegateTarget, that's what I'd use barring a good reason to use something else. The cost of passing an element reference (as opposed to a selector) into $() isn't large at all, it's likely whatever else you're doing in the handler washes out any overhead it adds.

Answer 2

You can use .closest():

$(this).closest("div.ajax_table_container");

This will return the parent of the clicked link.