My appended elements don't catch 'on' event

Question

fellas. I have this code that appends a row with some elements, among them an input file:

$('#uploadDocumentoEnviarAseguradora').on('click', function() {
    var num_ficheros = $('.lista-ficheros').length + 1;

    var linea = '<div class="form-group"><div class="row form-horizontal lista-ficheros"><div class="col-xs-9"></div><input type="file" id="docEnviarAseguradora' + num_ficheros + '" class="documentoEnviarAseguradora"/><button class="btn btn-default btn-xs" id="uploadDocumento"><span class="glyphicon glyphicon-trash"></span></button></div></div>';
    $(this).parent().parent().parent().append(linea);
    $("#docEnviarAseguradora" + num_ficheros).click();
});

And I have that one that handles when that new input file gets clicked.

$('documentoEnviarAseguradora').on('change',function() {
    alert("pos ok");
});

But I get no response when I load the file on my input file. Can you see what I'm doing wrong? Thank you in advance :)

score 2 · Answer 1 · answered Jun 12 '14 at 18:44

2

Bad selector (missing the dot for a selection by class) and lack of delegation (needed because the element is added after the call to on).

Use

$(document.body).on('change','.documentoEnviarAseguradora',function() {
    alert("pos ok");
});

If possible, use a better element than $(document.body) to limit event handling.

answered Jun 12 '14 at 18:44

Denys Séguret

372,613
87
782
758

2

Reference to [jQuery `on()` delegation](http://api.jquery.com/on/#direct-and-delegated-events). – showdev Jun 12 '14 at 18:45
Correct answer, but worth emphasizing the word `delegation` and sending the OP back to the [jQuery docs](http://api.jquery.com/on/) for more info. – Jeremy J Starcher Jun 12 '14 at 18:45
that missing dot was a fail when copypasting ;) thank you very much! – jdlcgarcia Jun 12 '14 at 18:56

My appended elements don't catch 'on' event

1 Answers1