jquery - 基金会揭示附加内容

Question

我正在通过 .append 将一些内容加载到一个未排序的列表元素中，如下所示：

    $(document).ready(function(){
        $("#player_status_5342").html('<img src=" /site/templates/images/system/loader/small_ajax_loader.gif"/>');
        $.getJSON("/api-checks/get_ingame_bool/euw/rorotan", function(result){
        console.log(result + " RoroTan");
            if(result == '1'){
                $("#player_status_5342").html('<img src=" /site/templates/images/system/status/online.png"/>');
                $("#36868417").append('<li><a href="/pages/ingame-info/euw/RoroTan" class="modal" reveal-size="large">See game details!</a></li>');
            }else{
                $("#player_status_5342").html('<img src=" /site/templates/images/system/status/offline.png"/>');
            }
        });
    });

player_status_5342 是一个跨度。

这就是我之前使用 click 事件的方式：

$(document).ready(function(){
    $(function(){
        $(document).foundation();    
    })
    $('a.modal').click(function(event) {
        event.preventDefault(); //Prevent default event
        var size = $(this).attr('reveal-size');
        var $div = $('<div id="modal">'),$this = $(this);
        $('#modal').each(function(){//Clean added classes - for repeated loads
            $(this).remove();
        });
        $div.addClass('reveal-modal '+size).appendTo('body');//Add reveal to body

        $div.empty().html('<p align="center"><img src="http://www.kadowereld.nl/images/algemeen/loader2.gif" /></p>').append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open');//Create reveal with Preloader!

        $.get($this.attr('href'), function(data) {
            return $div.empty().html(data).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal');//Add ajax data to preloadr. W can use jquery $.post also.
        });
    });
});

我已经尝试使用 .on("click", function(){

因为这通常解决了我的问题，但这次没有用。

Answer 1

它不是

$('a.modal').on('click', function(){})

但

$(document).on('click', 'a.modal', function(){})

document最近的非动态父级在哪里。

Answer 2

Johnvh说明了这个解决方法；在尝试调用 open 之前初始化小部件。

以下作品：

  $('<div></div>')
  .addClass('reveal-modal')
  .attr('data-reveal', '')
  .append($('<h1>Hello</h1>'))
  .appendTo($('body'))
  .foundation('reveal')     // <-- need this first!
  .foundation('reveal', 'open');