jQuery on() - è event.delegateTarget il modo migliore per ottenere il contenitore principale della funzione on()?

Question

Ho un HTML simile a questo:

<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> 

e JavaScript:

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

In un'applicazione reale che sto ricaricando contenuto della richiesta Ajax l'indirizzo fornito nel link cliccato.

La mia domanda è, però, è il metodo che sto usando meglio per ottenere il div principale (con classe ajax_table_container). Sto parlando del frammento: event.delegateTarget. C'è un modo migliore di farlo in jQuery? (. Btw io non voglio usare $('div.ajax_table_container') qui - ci potrebbe essere un paio di questi div in una sola pagina)

FIDDLE

EDIT: Dopo aver ottenuto alcune risposte e controllando google mi piacerebbe segnare me stesso come duplicato ;-) Qui: How to get parent selector with jquery.on('click'), base on the clicked element

Answer 1

Se il tuo obiettivo è ottenere l'elemento sul quale hai agganciato l'evento, non è solo l'opzione migliore, ma quasi l'unica opzione.

Un'altra opzione, che io non sto sostenendo, è quello di ricordare ciò che è stato utilizzato in una variabile che il gestore di eventi chiude sopra:

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

Ma dal momento che jQuery che ti dà a portata di mano delegateTarget, che è quello che ho' d usa il blocco di una buona ragione per usare qualcos'altro. Il costo del passaggio di un riferimento di elemento (anziché di un selettore) a $() non è affatto grande, è probabile che qualsiasi altra cosa tu stia facendo nel gestore mana il sovraccarico che aggiunge.

Answer 2

È possibile utilizzare .closest():

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

Ciò restituirà il genitore del link cliccato.

Answer 3

Dal momento che, si sta utilizzando event delegation qui per registrare il gestore di eventi, l'opzione migliore per ottenere l'elemento ajax_table_container cui è collegato il momento cd gestore di eventi jQuery è quello di utilizzare il event.delegateTarget qui.