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

Question

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

生成的link必须根据原<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."...

我怀疑 foundation reveal 没有加载到这个动态插入的 dom link 元素中。我怎样才能把它弄出来？

<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>

// 
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);

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

Foundation 6 reveal modal not working with dynamically added dom elements

jquery

jquery-ui

zurb-foundation

zurb-reveal