jquery - Foundation 6 显示模式不适用于动态添加的 dom 元素

Question

我想将 dom 元素<a>链接附加到 jquery-ui.ui-autocomplete菜单。这行得通。

生成的链接必须根据原始<input reveal="XXX">attr传递的id参数打开一个foundation 6.2.3 modal（foundation reveal-modal）。

开启阶段不起作用：虽然 id 参数正确，但 js 控制台说"ReferenceError: We're sorry, 'open' is not an available method for this element."...

我怀疑基础显示没有加载到这个动态插入的 dom 链接元素中。我怎样才能把它弄出来？

<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

要在您的新元素上启动显示，在您的行$(reveal).foundation('open');添加之前new Foundation.Reveal(reveal);