<script type="text/javascript">
  function setFilter(){
   $.ajax({
  type:"POST",
  url:"{{ url_for('gallery.load_image') }}",
  data:JSON.stringify({"id":id}),
  contentType:'application/json;charset=UTF-8',
  success:function(result){
  console.log(result);
    $("#gallery").html( {% for  i in result %} <img src=i.filename>{% endfor %} );  !!! тут чтото сделать надо.
    });
  );
  };
  $(".filter").click(setFilter);
  setFilter();
</script>

for(var i=0; i<data.length; i++){
    $('#gallery').append('<img src="'+i.filename+'" />')
}

Первый .....
  $.ajax({
  type:"POST",
  url:"{{ url_for('gallery.load_image') }}",
  data:JSON.stringify({"id":id}),
  dataType: "json",
  contentType:'application/json;charset=UTF-8',
    success:function(result){
---- эта часть обновляется при ajax запросе, стили не срабатывают
  $('#gallery').append('<div class="item"><ul class="gal">');                           
  for(var i=0; i<result.length; i++) {
	$('#gallery').append('<li><img src="/static/gallery/'+result[i]+'" alt=""></li>');	};
$('#gallery').append("</ul></div><h2> test css</h2>"); -> <h2>- сохраняет стиль при запросах.
}});
Второй...
этот код при загрузке страницы. стили работают.
  <div id="gallery">
  </div>
<div class="item">
<ul  class="gal">
  {% for image in images  %}
  		<li><img src="/static/gallery/{{ image.filename }}" alt=""></li>
		{% endfor %}
</ul>
</div>

eval("print")
eval("(")
eval("x)")

src="/static/gallery/'+result[i]+'"