problema con <a> dinamico che non funziona

[MarcoBizzocchi]

Gentili frequentatori di Html.it

Vorrei sottoporvi un piccolo problema che mi sta causando diversi problemi...

Sto realizzando un sito web per ospitare un archivio fotografico.
Ho un pulsante:

codice HTML:
<button class="selezioneAll btn btn-info dropdown-toggle" id="bottoneAll" type="button">ALL</button>
che richiama la seguente funzione jquery:

codice:
$('.selezioneAll').click(function(event){


event.preventDefault();
$("#bottoneAll").prop("disabled", true);
$.ajax({
url: 'getuser.php?az=estraiTutte',
type: 'POST',
dataType: 'json'
})
.done(function(data){
var numero=0;
console.log(data);
$(data).each(function() {
$("#row-foto").append("<div class='col-sm-3' style='margin-bottom:30px;'><ul class='nav nav-tabs' role='tablist'><li role='presentation' class='active'><a href='#home"+this.foto_id+"' aria-controls='home"+this.foto_id+"' role='tab' data-toggle='tab'><i class='fa fa-picture-o fa-2x' aria-hidden='true'></i></a></li><li role='presentation'><a href='#opzioni"+this.foto_id+"' aria-controls='opzioni"+this.foto_id+"' role='tab' data-toggle='tab'><i class='fa fa-file-text-o fa-2x' aria-hidden='true'></i></a></li></ul><div class='tab-content'><div role='tabpanel' class='tab-pane active' id='home"+this.foto_id+"'><div class='row rowtitolo'><div class='col-sm-1'><input style='margin-top:20px;margin-left:10px;' id='checkbox"+this.foto_id+"' type='checkbox' value=''></div><div class='col-sm-11' style='text-align:center;'><h3>"+this.foto_titolo+"</h3></div></div><div class='row rowimmagine'><div class='col-sm-12'><img src='"+this.foto_urlfoto+"' class='img-responsive' alt=''></img></div></div></div><div role='tabpanel' class='tab-pane' id='opzioni"+this.foto_id+"'><table style='margin-top:55px;' class='table table-striped'><tr><td>Luogo</td><td>"+this.luogo_nome+"</td></tr><tr style='color:white;'><td>Epoca</td><td>"+this.epoca_titolo+"</td></tr><tr><td>Data</td><td><input id='dataFoto"+this.foto_id+"' type='text' style='border:none;' value='"+this.foto_data+"'></td><td><a href='#' style='color:green;' id='"+this.foto_id+"' data-id='"+this.foto_id+"' class='modificaDataFoto modificaDataFoto"+this.foto_id+"'>Modifica</a></td></tr><tr style='color:white;'><td>Fotografo</td><td>"+this.foto_fotografo+"</td><td><a style='color:green;' href='#' data-id='"+this.foto_id+"' class='modificaFotografo'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></a></td></tr> <tr><td>Didascalia</td><td>"+this.foto_descrizione+"</td><td><a style='color:green;' href='#' data-id='"+this.foto_id+"' class='modificaDidascalia'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></a></td></tr></table></div></div></div>");
});

})
.fail(function(){
$('.modal-body').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
});
});
Questo codice, sostanzialmente mi crea dinamicamente dei DIV in base a quante fotografie trova nel database.
All'interno di ogni div creato c'è un'ancora:

codice HTML:
<a href='#' style='color:green;' id='"+this.foto_id+"' data-id='"+this.foto_id+"' class='modificaDataFoto modificaDataFoto"+this.foto_id+"'>Modifica</a>
Al click dell'ancora però non riesco a far succedere niente:
questa funzione va a vuoto:

codice:
$('.modificaDataFoto').bind('click', function(event) {
event.preventDefault();
var idFotoModifica= $(this).attr("data-id");
console.log(idFotoModifica);
$("dataFoto"+idFotoModifica).focus();
$("dataFoto"+idFotoModifica).css("color", "red");
$(this).attr("class", "modificaDataFotoConferma");
});
Potete aiutarmi?

[luca200]

$('.modificaDataFoto').bind('click', function(event) {
event.preventDefault();
var idFotoModifica= $(this).attr("data-id");
console.log(idFotoModifica);
$("dataFoto"+idFotoModifica).focus();
$("dataFoto"+idFotoModifica).css("color", "red");
$(this).attr("class", "modificaDataFotoConferma");
});

Questa istruzione dov'è? Quando gira? Se la fai girare prima della chiamata ajax non può agganciare gli elementi, deve girare dopo