2016-11-19 84 views
1

我想追加一个dom元素<a>链接到jquery-ui .ui-autocomplete菜单。这工作。Foundation 6揭示模态不能动态添加dom元素

生成的链接必须根据原始<input reveal="XXX"> attr传递的id参数打开基础6.2.3模态(基础揭示模式)。

断开相位不工作:当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'); 
      }); 
     }, 
}); 

回答

2

要启动新的元素上显示,您的线路$(reveal).foundation('open');前添加new Foundation.Reveal(reveal);

+0

其实...我需要'$(文件).foundation();'在我的脚本... – user2154587