Foundation 6 reveal modal not working with dynamically added dom elements

Question

I want to append a dom element <a> link to jquery-ui .ui-autocomplete menu. This works.

The generated link must open a foundation 6.2.3 modal (foundation reveal-modal) according to the id parameter passed by original <input reveal="XXX"> attr.

The opening phase is not working: while the id parameter is correct, the js console says "ReferenceError: We're sorry, 'open' is not an available method for this element."...

I suspect that foundation reveal is not loaded to this dynamically inserted dom link element. How can I get it out?

<input name="item" type="text" placeholder="Item..." class="ac" reveal="addItem">

<div id="addItem" class="reveal" data-reveal>
  TEST
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

// http://stackoverflow.com/questions/12479498/jquery-auto-complete-append-link-at-the-bottom
var test = [ "Item 1", "Item 2", "Item 3", ];

$('.ac').autocomplete({
            minLength: 0,
            source: test,
            open: function(event, ui) {
            $('.ui-autocomplete').append('<li><a class="reveal-modal" data-open="'+$(this).attr('reveal')+'" title="Inserted text not found... add new item?">...add new item</a></li>');
            $('.reveal-modal').click(function( event ) {
              event.preventDefault();
              var reveal = '#' + $(this).attr('data-open');
              console.log(reveal);
              $(reveal).foundation('open');
            });
      },
});

Answer 1

To initiate reveal on your new element, before your line $(reveal).foundation('open'); add new Foundation.Reveal(reveal);