How do I get the clicked element with inline HTML

Question

I'm creating a tags with this code:

$('#td' + id).append('<p><a href="#" onclick="excluirArquivo(\'' + response + '\'); return false;"><img src="/erp/proposta/media/images/delete.png" alt="Excluir arquivo" /></a> ' + file + '</p>');

excluirArquivo function

function excluirArquivo(arquivo) {
    $.ajax({
        type: 'POST',
        url: '/erp/proposta/index.php/arquivo/remover/' + arquivo
    });

    alert($(this));
}

But this element inside excluirArquivo function is returning the Window object. How do I get the clicked element (a tag) inside of excluirArquivo?

Answer 1

You need to split it, like this:

$("#td" + id).append("<p><a  href=\"#\" /></p>");

and then select the new element

$("#td > p > a").click(
function(){
//this now will be pointing to the selected element
}
)

Answer 2

If you must assign your event handler that way (that is, the "DOM 0" way, instead of with jQuery), you can do this:

<a href='#' onclick='excluirArquivo(this)' > ... </a>

Or, I suppose (given that you want to pass a parameter):

<a href='#' onclick='excluirArquivo.call(this, param)'> ... </a>

That way, "this" inside the function will be the element, which seems closer to what you want.